primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-23 11:27:26 +03:00
Code Issues Projects Releases Wiki Activity
980837be57
css/docs/tooltips.md
Jordan Scales b8d3756b8e Removed note about aria-label requiring a <button> or <a> element 
`aria-label` can be used on any element, and is even used on the `<span>`
example right below this paragraph.

I verified this with ChromeVox+Chrome and VoiceOver+Safari.
2016-02-01 21:10:50 -05:00

604 B
Raw Blame History

layout title
page 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

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

{% example html %} Text with a tooltip {% endexample %}