A tooltip is a short contextual explanation that appears near a control, often when it receives pointer hover or keyboard focus. It can clarify an icon or unfamiliar term, but should not be the only place where essential instructions or actions are available.
A tooltip is like a small footnote beside a control: useful for a quick clarification, not a replacement for the main instructions.
Keep the explanation short
Explain an icon, label or constraint in a phrase that can be read at a glance. If the explanation needs several sentences, a help panel or nearby text is easier to use. Do not put a critical action, legal term or essential warning only in a tooltip.
Support more than hover
A tooltip should be available when a control receives keyboard focus and should not require a mouse. Touch users need a reliable way to reveal the same information, such as an explicit help control. Its content should remain visible long enough to move a pointer onto it when that interaction is supported.
Position without hiding the task
Place the tooltip near its trigger and keep it within the viewport. Avoid covering the control or nearby content needed to understand the explanation. Allow it to dismiss on Escape and avoid opening multiple tips that compete for attention.
Example: an unfamiliar icon
A small “i” beside “Reliability” opens the definition “How much evidence supports this score.” The term remains visible and the tooltip provides only a concise clarification. If users need to learn how reliability is calculated, a linked explanation or information panel should carry the fuller content.
Frequently asked questions
Key takeaways
- Use a tooltip for short, optional clarification.
- Make it available by focus and touch, not just hover.
- Keep it visible and positioned near its trigger.
- Put essential instructions in persistent content.