Tooltips
Scaffolding | Layout | Type | Buttons | Forms | Navigation | Alerts | Blankslate | Avatars | States | Tooltips | Utilities | Code Guidelines | Colors
Tooltips
Add tooltips built entirely in CSS to nearly any element. Just add a few classes and an aria-label
attribute.
In addition, you’ll want to specify a direction:
.tooltipped-n
.tooltipped-ne
.tooltipped-e
.tooltipped-se
.tooltipped-s
.tooltipped-sw
.tooltipped-w
.tooltipped-nw
Remember, aria-label
and tooltip classes must go directly on <button>
and <a>
elements. Tooltip classes also conflict with Octicon classes, and as such, must go on a parent element instead of the icon.
Text with a tooltip
<span class="tooltipped tooltipped-n" aria-label="This is the tooltip.">
Text with a tooltip
</span>