Tooltip Implementation Limitations
Accessible tooltips should fulfill the following criteria:
- Present additional information about an associated element
- Be visible on hover and focus
- Allow mouse over the tooltip without dismissing it
- Be closable by esc button
- Remain visible until manually dismissed
Your responsibilities:
- As you can see, the last 2 criteria require JavaScript. You are fully responsible for implementing those on your own.
- Focus criteria only apply to focusable elements like
a,button,input,textarea,select,[contentEditable], andiframe. Do not use tooltips with any other element. - Tooltips do not work at all on submit
buttonandalink when used on touch screen devices (The tooltip is not shown as the touch triggers the element's native action at the same time).
Note that any wrapper element directly containing elements with [aria-describedby]
and [role='tooltip'] (in the example below it is the label) is
styled with position:relative.
Please use with caution! The best tooltip is often no tooltip.
<label>
Username:
<input aria-describedby="username-tooltip" type="text" />
<div role="tooltip" id="username-tooltip">
Username cannot be an email
</div>
</label> <div class="s-grid" style="--span:8">
<div>
<label>
Text:
<textarea aria-describedby="text-tooltip"></textarea>
<span role="tooltip" id="text-tooltip">
Write something nice and polite here. See, I break into multiple lines
</span>
</label>
<label>
How are you?
<select aria-describedby="select-tooltip">
<option label=" "></option>
<option value="z">Sleepy</option>
<option value="zzz">Already sleeping</option>
</select>
<span role="tooltip" id="select-tooltip">
Don't leave me empty
</span>
</label>
<span>
<a href="#" aria-describedby="link-tooltip">Link</a>
<span role="tooltip" id="link-tooltip">
I lead to nowhere!
</span>
</span>
<span>
<button aria-describedby="button-tooltip">Button</button>
<span role="tooltip" id="button-tooltip">
Don't press me yet
</span>
</span>
</div>
</div>
Link
I lead to nowhere!
Tooltip has max-width: 25rem
By default, a tooltip is positioned at bottom end to avoid overlapping content.
Only in the case of a, the tooltip is at bottom start.