mirror of
https://github.com/tabler/tabler.git
synced 2026-01-11 15:10:08 +04:00
62 lines
1.1 KiB
SCSS
62 lines
1.1 KiB
SCSS
.tooltip {
|
|
position: relative;
|
|
|
|
& {
|
|
&:before,
|
|
&:after {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: .3s opacity;
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
&:before {
|
|
content: attr(data-title);
|
|
position: absolute;
|
|
display: block;
|
|
bottom: calc(100% + .5rem);
|
|
left: 50%;
|
|
background: $color-text;
|
|
color: $color-white;
|
|
white-space: nowrap;
|
|
line-height: 1;
|
|
font-weight: $font-weight-normal;
|
|
font-size: $font-size-h6;
|
|
font-family: $font-family-base;
|
|
padding: $gap-2;
|
|
border-radius: $border-radius;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
border: $gap-1 solid transparent;
|
|
border-top-color: $color-text;
|
|
position: absolute;
|
|
left: calc(50% - #{$gap-1});
|
|
bottom: 100%;
|
|
}
|
|
|
|
&:hover {
|
|
&:before,
|
|
&:after {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition-delay: .3s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tooltip-monospaced {
|
|
& {
|
|
&:before {
|
|
font-family: $font-family-monospace;
|
|
font-size: $font-size-h6;
|
|
}
|
|
}
|
|
}
|