Add tooltips built entirely in CSS to appropriate elements.
Implementation and accessibility
Tooltips as a UI pattern should be our last resort for conveying information because it is hidden by default and often with zero or little visual indicator of its existence.
Before adding a tooltip, please consider: Is this information essential and necessary* Can the UI be made clearer? Can the information be shown on the page by default? And check out alternatives to Tooltips to explore your options.
Attention
- Never use tooltips on static elements. They should only be used on interactive elements, because users cannot tab-focus into static elements, which may make the content inaccessible for keyboard-only users and screen readers.
- we use
aria-labelfor tooltip contents, because it is crucial that they are accessible to screen reader users. However,aria-labelreplaces the text content of an element in screen readers, so only use.tooltippedon elements with no existing text content such as an icon-only button. - Tooltip classes will conflict with Octicon styles, and as such, must be applied to the parent element instead of the icon.
Tooltip direction
Specify the direction of a tooltip with north, south, east, and west directions:
Tooltip alignment
Align tooltips to the left or right of an element, combined with a directional class to specify north or south. Use a modifier of 1 or 2 to choose how much the tooltip's arrow is indented.
Tooltips with multiple lines
Use .tooltipped-multiline when you have long content. This style has some limitations: you cannot pre-format the text with newlines, and tooltips are limited to a max-width of 250px.
Tooltips with 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 .tooltipped-no-delay modifier class you can use to override this.
