No notes defined.
<div style="padding: 80px 50px">
<p><a href="#" data-tooltip="I'm the tooltip" class="button">I'm a link with a tooltip</a></p>
<p><button data-tooltip="I'm the tooltip" class="button">I'm a button with a tooltip</button></p>
</div>
/* No context defined. */
[data-tooltip] {
position: relative;
cursor: pointer;
}
[data-tooltip]:before,
[data-tooltip]:after {
position: absolute;
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transform: translate3d(0, 0, 0);
pointer-events: none;
bottom: 100%;
left: 50%;
}
[data-tooltip]:before {
z-index: 1001;
border: 6px solid transparent;
background: transparent;
content: "";
margin-left: -6px;
margin-bottom: -12px;
border-top-color: #000;
border-top-color: hsla(0, 0%, 0%, 0.75);
}
[data-tooltip]:after {
z-index: 1000;
padding: 0.5rem;
width: 180px;
background-color: #000;
background-color: hsla(0, 0%, 0%, 0.75);
color: #fff;
content: attr(data-tooltip);
font-size: 0.8rem;
line-height: 1.3;
font-weight: 700;
margin-left: -90px;
border-radius: $radius;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after {
visibility: visible;
opacity: 1;
transform: translateY(-10px);
}