Edit
/* scss/Tooltips/_theme-tooltips.scss */
.theme-tooltip {
~.popover {
padding: 12px 12px 8px;
line-height: 18px;
max-width: 320px;
border: 1px solid #E4E7EC;
border-radius: 8px;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.1), 0px 4px 6px -2px rgba(16, 24, 40, 0.05);
color: $gray-700;
.arrow {
border-color: transparent;
&:after {
border: none;
width: 12px;
height: 12px;
background: $white;
border-radius: 1px;
transform: rotate(45deg);
margin: -6px !important;
}
&:before {
content: "";
border: none;
position: absolute;
width: 12px;
height: 12px;
background: #E4E7EC;
border-radius: 1px;
transform: rotate(45deg);
margin: -6px !important;
}
}
&.bottom .arrow {
top: -11px;
}
.popover-title {
padding: 0 0 4px 0;
background-color: transparent;
border: none;
font-size: 12px;
@extend .weight-m;
}
.popover-content {
padding: 0 0 4px 0;
font-size: 12px;
&:empty {
display: none;
}
}
&.top .arrow:after {
bottom: 12px;
}
&.top .arrow:before {
bottom: 10px;
}
&.right .arrow:after {
bottom: 0;
left: 12px;
}
&.right .arrow:before {
bottom: 0;
left: 10px;
}
&.bottom .arrow:after {
top: 12px;
}
&.bottom .arrow:before {
top: 10px;
}
&.left .arrow:after {
bottom: 0;
right: 12px;
}
&.left .arrow:before {
bottom: 0;
right: 10px;
}
}
/// tooltip dark
&.theme-tooltip-dark {
~.popover {
background-color: $gray-900;
color: $white;
border: none;
.arrow {
border-color: transparent;
&:after {
background: $gray-900;
}
&:before {
background: $gray-900;
display: none;
}
}
&.top>.arrow:after {
border-top-color: $gray-900;
}
&.right>.arrow:after {
border-right-color: $gray-900;
}
&.bottom>.arrow:after {
border-bottom-color: $gray-900;
}
&.left>.arrow:after {
border-left-color: $gray-900;
}
}
}
}