.tooltipped {
position: relative;
}
// This is the tooltip bubble .tooltipped::after {
position: absolute; z-index: 1000000; display: none; padding: $em-spacer-5 $em-spacer-6; font: normal normal 11px/1.5 $body-font; -webkit-font-smoothing: subpixel-antialiased; color: var(--color-tooltip-text); text-align: center; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-wrap: break-word; white-space: pre; pointer-events: none; content: attr(aria-label); background: var(--color-tooltip-bg); border-radius: $border-radius; opacity: 0;
}
// This is the tooltip arrow .tooltipped::before {
position: absolute; z-index: 1000001; display: none; width: 0; height: 0; color: var(--color-tooltip-bg); // stylelint-disable-line primer/colors pointer-events: none; content: ""; // stylelint-disable-next-line primer/borders border: 6px $border-style transparent; opacity: 0;
}
// delay animation for tooltip @keyframes tooltip-appear {
from { opacity: 0; } to { opacity: 1; }
}
// This will indicate when we'll activate the tooltip .tooltipped:hover, .tooltipped:active, .tooltipped:focus {
&::before, &::after { display: inline-block; text-decoration: none; animation-name: tooltip-appear; animation-duration: $tooltip-duration; animation-fill-mode: forwards; animation-timing-function: ease-in; animation-delay: $tooltip-delay; }
}
.tooltipped-no-delay:hover, .tooltipped-no-delay:active, .tooltipped-no-delay:focus {
&::before, &::after { animation-delay: 0s; }
}
.tooltipped-multiline:hover, .tooltipped-multiline:active, .tooltipped-multiline:focus {
&::after { display: table-cell; }
}
// Tooltipped south .tooltipped-s, .tooltipped-se, .tooltipped-sw {
&::after { top: 100%; right: 50%; // stylelint-disable-next-line primer/spacing margin-top: 6px; } &::before { top: auto; right: 50%; bottom: -7px; // stylelint-disable-next-line primer/spacing margin-right: -6px; // stylelint-disable-next-line primer/borders border-bottom-color: var(--color-tooltip-bg); }
}
.tooltipped-se {
&::after { right: auto; left: 50%; margin-left: -$spacer-3; }
}
.tooltipped-sw::after {
margin-right: -$spacer-3;
}
// Tooltips above the object .tooltipped-n, .tooltipped-ne, .tooltipped-nw {
&::after { right: 50%; bottom: 100%; // stylelint-disable-next-line primer/spacing margin-bottom: 6px; } &::before { top: -7px; right: 50%; bottom: auto; // stylelint-disable-next-line primer/spacing margin-right: -6px; // stylelint-disable-next-line primer/borders border-top-color: var(--color-tooltip-bg); }
}
.tooltipped-ne {
&::after { right: auto; left: 50%; margin-left: -$spacer-3; }
}
.tooltipped-nw::after {
margin-right: -$spacer-3;
}
// Move the tooltip body to the center of the object. .tooltipped-s::after, .tooltipped-n::after {
transform: translateX(50%);
}
// Tooltipped to the left .tooltipped-w {
&::after { right: 100%; bottom: 50%; // stylelint-disable-next-line primer/spacing margin-right: 6px; transform: translateY(50%); } &::before { top: 50%; bottom: 50%; left: -7px; // stylelint-disable-next-line primer/spacing margin-top: -6px; // stylelint-disable-next-line primer/borders border-left-color: var(--color-tooltip-bg); }
}
// tooltipped to the right .tooltipped-e {
&::after { bottom: 50%; left: 100%; // stylelint-disable-next-line primer/spacing margin-left: 6px; transform: translateY(50%); } &::before { top: 50%; right: -7px; bottom: 50%; // stylelint-disable-next-line primer/spacing margin-top: -6px; // stylelint-disable-next-line primer/borders border-right-color: var(--color-tooltip-bg); }
}
// Tooltip align right and left .tooltipped-align-right-1, .tooltipped-align-right-2 {
&::after { right: 0; margin-right: 0; }
}
.tooltipped-align-right-1 {
&::before { right: 10px; }
}
.tooltipped-align-right-2 {
&::before { right: 15px; }
}
.tooltipped-align-left-1, .tooltipped-align-left-2, {
&::after { left: 0; margin-left: 0; }
}
.tooltipped-align-left-1 {
&::before { left: 5px; }
}
.tooltipped-align-left-2 {
&::before { left: 10px; }
}
// Multiline tooltips // // `.tooltipped-multiline` Add this class when you have long content. // The downside is you cannot preformat the text with newlines and `[w,e]` // are always `$tooltip-max-width` wide. .tooltipped-multiline {
&::after { width: max-content; max-width: $tooltip-max-width; word-wrap: break-word; white-space: pre-line; border-collapse: separate; } &.tooltipped-s::after, &.tooltipped-n::after { right: auto; left: 50%; transform: translateX(-50%); } &.tooltipped-w::after, &.tooltipped-e::after { right: 100%; }
}
@media screen and (min-width: 00) {
// IE11 .tooltipped-multiline::after { width: $tooltip-max-width; }
}
// Sticky tooltips // // Always show the tooltip. .tooltipped-sticky {
&::before, &::after { display: inline-block; } &.tooltipped-multiline { &::after { display: table-cell; } }
}