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>