Tooltips
WAI-ARIA Reference: A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Escape is pressed or on mouse out. [ Source ]
Tooltips Sample(s):
Top Tooltip
Right Tooltip
Left Tooltip
Bottom Tooltip
// Data placement top, right, bottom, left
<button class="trigger" data-placement="top" data-content="Watch out for that first step, it's a doozie! -- Ned Ryerson">
<svg class="fill-lt-grey-50 w-5 h-5">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-help"></use>
</svg>
</button>