Tooltip
A short label that shows on hover or keyboard focus, for icon buttons and anything else that needs a word of explanation.
Shows the tokens
Markup
<span class="ob-tooltip-host">
<button type="button" aria-describedby="tip-1">Inspect</button>
<span class="ob-tooltip" role="tooltip" id="tip-1">Shows the tokens</span>
</span>Notes
It sits above, centred. .ob-tooltip--start and --end line it up with an edge instead, for triggers near the side of the screen.
CSS
@import "obvious/css/components/tooltip.css";