Tooltip
Tooltips are used for displaying textual information that elaborates on a related action or content. The tooltip must be supplemental and not essential to performing the related action or understanding the related content. No tooltip should be longer than two lines of text. Assistive technology, such as screen readers, will associate the tooltip directly with the related action or content. If the tooltip is therefore too long, it will become an obstacle rather than an assistance. For longer and potentially interactive content use a popover instead.
Below is an example of a paragraph of text presented visually as a tooltip. A tooltip appears hovering over its surroundings and uses an arrow for associating a given tooltip with the action or content it is describing.
Of course, tooltips are meant to be used in conjuction with either an action or some content. Below is an example of a button that will log an event to the browser console, though the button only contains the text "Log". When hovering or moving keyboard focus to the button, a tooltip will appear after a short delay explaining exactly what the button does. The tooltip will disappear when either the mouse leaves or the keyboard focus is moved away from the button. Pressing Escape will also hide the tooltip.