spee.ch/client/scss/_tooltip.scss

35 lines
804 B
SCSS
Raw Normal View History

2018-05-31 00:00:09 +02:00
/* 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;
}