What
Also known as also known as a screentip, hover help, or infotip. It provides additional information about that element, usually in the form of text, but can also include images or even interactive elements.
Why
They aim to improve user experience by providing additional context and helping users understand the elements they're interacting with. This can be useful for screen readers.
Here are some typical uses:
- Icons - Hovering over icons on a website can reveal their function, like "Print" or "Download
- Buttons - Tooltips can clarify the action a button will trigger when clicked
- Technical terms - Hovering over technical terms can unveil their definition or explanation
- Images - Tooltips can offer additional information about images, like captions or descriptions.
How
- Trigger: They appear when you hover your cursor over an element, typically disappearing when you move your cursor away
- Content: They contain concise and informative text about the element they're associated with, often clarifying its function, providing additional details, or offering instructions
- Placement: They appear near the element they're associated with, often positioned slightly above or below it
The html can look like this:
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
Screen reader note: Sometimes less is more. If the element is already tagged, captioned then don't add a tooltip simply because you can as you will increase the work a screen reader has to do.