@natlibfi/melinda-ui-commons
Version:
Common modules for Melinda UI applications
58 lines (52 loc) • 1.45 kB
CSS
/* ---------------------------------------------------------------------------- */
/* TOOLTIPS */
/* ---------------------------------------------------------------------------- */
/* Styles for small bottom tooltips that appear on button hover */
/* Styles for larger info tooltips (clickable, with icons and more text) TODO */
.tooltip {
position: relative;
}
.tooltip:hover:before {
pointer-events: none;
content: attr(tooltip-text);
position: absolute;
z-index: 7;
left: 50%;
top: 120%;
transform: translateX(-50%);
padding-left: 12px;
padding-right: 12px;
padding-bottom: 6px;
padding-top: 6px;
border-radius: 0.2rem;
background-color: var(--color-blue-100);
color: var(--color-primary-white);
font-size: var(--font-size-label-extra-small);
font-family: var(--font-family-label);
filter: drop-shadow(0px 5px 3px var(--color-grey-80));
}
.tooltip:hover:after {
pointer-events: none;
content: "";
position: absolute;
z-index: 7;
left: 50%;
top: 90%;
border-style: solid;
border-color: transparent;
border-bottom-color: var(--color-blue-100);
border-width: 7px;
margin-left: -7px;
}
/* for small sized buttons */
button.small.tooltip:hover:before {
left: 50%;
top: 130%;
}
button.small.tooltip:hover:after {
z-index: 7;
left: 50%;
top: 88%;
border-width: 7px;
margin-left: -7px;
}