Tooltip

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

Tooltip classes will conflict with Octicon classes, and as such, must go on a parent element instead of the icon.

Tooltip North Tooltip North East Tooltip East Tooltip South East Tooltip South Tooltip South West Tooltip West Tooltip North West

Tooltips No Delay

By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a modifier class you can use to override this. .tooltipped-no-delay

Tooltip no delay