spee.ch/client/scss/components/_tooltip.scss
2018-06-08 17:23:11 -07:00

34 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;
}