35 lines
804 B
SCSS
35 lines
804 B
SCSS
|
/* Tooltip container */
|
||
|
|
.tooltip {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
/* Tooltip text */
|
||
|
|
.tooltip > .tooltip-text {
|
||
|
|
visibility: hidden;
|
||
|
|
width: 15em;
|
||
|
|
background-color: #9b9b9b;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
padding: 0.5em;
|
||
|
|
/* Position the tooltip text */
|
||
|
|
position: absolute;
|
||
|
|
z-index: 1;
|
||
|
|
bottom: 110%;
|
||
|
|
left: 50%;
|
||
|
|
margin-left: -8em; /* Use half of the width (120/2 = 60), to center the tooltip */
|
||
|
|
}
|
||
|
|
/* Show the tooltip text when you mouse over the tooltip container */
|
||
|
|
.tooltip:hover > .tooltip-text {
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
/* arrow at bottom of tooltip text */
|
||
|
|
.tooltip > .tooltip-text::after {
|
||
|
|
content: " ";
|
||
|
|
position: absolute;
|
||
|
|
top: 100%;
|
||
|
|
left: 50%;
|
||
|
|
margin-left: -5px;
|
||
|
|
border-width: 5px;
|
||
|
|
border-style: solid;
|
||
|
|
border-color: #9b9b9b transparent transparent transparent;
|
||
|
|
}
|