What Is a Tooltip?
A tooltip is a small pop-up box of text that appears when a visitor hovers over or focuses on an element, offering a brief hint or explanation without cluttering the page. It typically clarifies an icon, a form field, or an abbreviated label, giving extra context on demand. Tooltips keep interfaces clean by hiding secondary help until it is needed. However, they rely on hovering, which does not exist on touchscreens, and they can create accessibility problems if built carelessly, so they suit optional hints rather than essential information.
- What it is
- A small pop-up with brief helper text triggered by hover or keyboard focus
- Best for
- Clarifying icons, abbreviations, or form fields with short, optional hints
- Mobile limitation
- Hover does not exist on touchscreens, so tooltips need a tap alternative
- Accessibility
- Must be keyboard-reachable and dismissible per guidance (WCAG 2.2)
- Native option
- The HTML title attribute shows a basic browser tooltip (MDN)
- Rule of thumb
- Never put essential information only in a tooltip
What a tooltip is #
A tooltip is a small floating box of text that appears when a visitor points at, hovers over, or keyboard-focuses on an element, then disappears when they move away. Its job is to supply a brief, secondary explanation on demand without permanently taking up space on the page. The classic example is an information icon next to a form field: hover over it and a short note explains what to enter. Tooltips also clarify icon-only buttons, define abbreviations, or expand truncated text. The appeal is a clean interface: the page stays uncluttered because the extra help stays hidden until someone asks for it. The catch is that tooltips depend on interactions, hovering in particular, that do not translate well to every device or user, and they are easy to build in ways that exclude some visitors. Used for genuinely optional hints, a tooltip is a helpful touch. Our /services/ui-ux-design work uses them sparingly and deliberately, never as a place to stash information visitors actually need to complete a task.
Where tooltips work well #
Tooltips are at their best supplying short, optional clarification that enhances an interface without being required to use it. An icon-only button, a common space-saver in toolbars, becomes far clearer when a tooltip names its function on hover, so users are not left guessing what a symbol means. Form fields benefit when a tooltip explains an unusual requirement, like the format of a reference number, without permanently crowding the field with instructions. Abbreviations, technical terms, and truncated labels can carry a tooltip that spells out the full meaning. In each case the interface stays clean while help sits one hover away. The unifying principle is that the tooltip content is helpful but not essential; a user who never sees it can still complete their task, just with a little more guesswork. That is the safe zone for tooltips. When the information genuinely matters, it belongs on the page itself. Our /services/conversion-optimization work uses tooltips to smooth away small confusions on forms and controls, reducing hesitation without hiding anything a visitor truly needs to proceed.
The trouble with hover on touchscreens #
Tooltips have a fundamental weakness: they were designed for a mouse, and mice are hovering devices, while phones and tablets are not. On a touchscreen there is no hover state; a finger either taps or does not, so a tooltip triggered purely by hover simply never appears for a majority of today's visitors. Some touch interfaces show a tooltip on a first tap and act on a second, but this behavior is inconsistent and often confuses users, who expect a tap to do something immediately. Given that more than half of web traffic is now on phones, relying on hover to reveal important help is a serious mistake. The safer approach is to design so the interface is clear without any tooltip, then treat the tooltip as a bonus for mouse users, or replace it with a tap-friendly alternative like an expandable hint or visible helper text. Our /services/web-design work treats mobile as the primary experience, so nothing important ever hides behind a hover that touch users can never trigger.
A simple and an accessible tooltip #
The native title attribute gives a basic tooltip, while a custom one needs ARIA so assistive technology announces it.
<!-- Basic browser tooltip (limited styling, no keyboard control) -->
<abbr title="Search Engine Optimization">SEO</abbr>
<!-- Accessible custom tooltip -->
<button aria-describedby="tip1">Help</button>
<span role="tooltip" id="tip1">We reply within one business day.</span>Accessibility pitfalls to avoid #
Tooltips are one of the easiest components to build inaccessibly, and doing so quietly excludes real visitors. First, a tooltip triggered only by mouse hover is invisible to keyboard users, so it must also appear on keyboard focus. Second, WCAG 2.2 requires that content appearing on hover or focus be dismissible without moving the pointer, that it stay visible long enough to read, and that a user can move the pointer over the tooltip itself without it vanishing. Many custom tooltips fail these tests, flickering away or trapping content out of reach. Third, screen readers need to know the tooltip exists and what it says, which requires correct ARIA associations linking the trigger to its text. The native title attribute offers a basic tooltip but has poor keyboard and screen-reader support and cannot be styled, so it is limited. Getting tooltips right takes deliberate effort, and getting them wrong risks both usability and, in the United States, legal exposure under the ADA. Our /services/ada-compliance work ensures interactive hints meet the standard.
Tooltips versus other help patterns #
A tooltip is one of several ways to offer help, and it is often not the best. A popover is larger and can hold richer content, sometimes with links or buttons, and usually opens on click rather than hover, making it touch-friendly. Inline helper text simply places a short explanation directly beneath a field or label, always visible and impossible to miss, which is the safest choice when the guidance matters. A modal or a dedicated help page suits longer explanations. The right pattern depends on how important and how lengthy the information is. Tooltips fit only the narrow case of short, optional hints for pointer users. When guidance is essential, inline text wins; when it is rich or interactive, a popover or modal serves better. Choosing well is a core interface decision, not a detail. Reaching for a tooltip by habit often hides help that should be visible or forces content into a box too small for it. Our /services/ui-ux-design work matches the pattern to the need rather than defaulting to hover-based tooltips everywhere.
Tooltip design best practices #
When a tooltip is the right choice, a few practices keep it helpful rather than annoying. Keep the text short, a phrase or a sentence, since a tooltip is a hint, not a paragraph; anything longer belongs in a popover or inline. Trigger it on both hover and keyboard focus so it reaches everyone using a pointer or a keyboard, and make sure it does not obscure the very element it describes. Position it so it stays on screen, not clipped at the edge of the viewport, and avoid a delay so long that users give up or so short that tooltips flash distractingly as the cursor passes. Never place essential information, like a price, a required action, or an error message, in a tooltip alone. And provide a touch-friendly path to the same information for phone users. Following these keeps tooltips a small, pleasant aid. Our /services/conversion-optimization work applies exactly this restraint, using tooltips to reduce friction on forms and controls without ever becoming a barrier or a source of frustration.
What tooltips mean for your site #
For a business owner, the lesson about tooltips is mostly about restraint. They are a tempting way to keep a page tidy, but that tidiness becomes a trap if you hide anything customers actually need behind a hover that touch users cannot trigger and some visitors cannot access. The safe mental model is that a tooltip is a nice-to-have hint for people using a mouse, never the only home for important information. If your forms confuse customers or your icons are unclear, the fix is often clearer visible labels rather than more tooltips. When tooltips are used, they should be built to appear on keyboard focus, be dismissible, and offer a touch alternative, all of which a professional developer handles as a matter of course. If your site relies heavily on hover-only tooltips, a meaningful share of visitors are missing that help entirely. A /free-website-audit can flag where hidden or inaccessible hints may be costing you conversions, and our /services/ui-ux-design work can replace them with clearer patterns.
The bottom line on tooltips #
A tooltip is a small pop-up of helper text that appears on hover or focus, offering brief, optional clarification without cluttering the page. It suits icons, abbreviations, and short form hints, keeping interfaces clean by hiding secondary help until it is wanted. Its weaknesses are real: hover does not exist on touchscreens, so tooltips can vanish for the majority of mobile visitors, and careless builds exclude keyboard and screen-reader users. The firm rule is to never put essential information, prices, required actions, or errors, in a tooltip alone, and to build any tooltip to be keyboard-accessible, dismissible, and touch-friendly. Often a visible inline hint or a click-based popover serves better. Used with restraint, a tooltip is a small, pleasant aid; overused, it hides help that should be seen. If your interface leans on hover-only hints, our /services/ui-ux-design page and a /free-website-audit can help you surface that guidance where every visitor can actually reach it.
FAQ
What is a tooltip used for?
A tooltip provides brief, optional helper text that appears when a visitor hovers over or focuses on an element. It clarifies things like icon-only buttons, abbreviations, or unusual form fields without permanently cluttering the page. Tooltips keep interfaces clean by hiding secondary help until it is needed, but they should never hold essential information.
Do tooltips work on mobile?
Not reliably. Tooltips are triggered by hover, and touchscreens have no hover state, so a hover-only tooltip often never appears on phones. Some devices show it on a first tap, but that behavior confuses users. For mobile, use visible helper text or a tap-based popover instead of relying on a tooltip.
Are tooltips bad for accessibility?
They can be if built carelessly. To be accessible, a tooltip must appear on keyboard focus, not just mouse hover, stay dismissible, remain readable long enough, and be announced to screen readers via ARIA. WCAG 2.2 sets these requirements. A mouse-only tooltip excludes keyboard and screen-reader users and creates legal risk under the ADA.
What is the difference between a tooltip and a popover?
A tooltip is small, shows brief text, and usually appears on hover or focus. A popover is larger, can hold richer content like links or buttons, and typically opens on click, which makes it touch-friendly. Use a tooltip for short hints and a popover when the information is longer or interactive.
How do I make a simple tooltip?
The easiest method is the HTML title attribute; adding title to an element shows a basic browser tooltip on hover. However, it has poor keyboard and screen-reader support and cannot be styled. For a reliable, accessible, styled tooltip, developers build a custom one with proper ARIA attributes and keyboard handling instead.
Should important information go in a tooltip?
No. Never place essential information, such as pricing, a required action, or an error message, in a tooltip alone. Tooltips can be missed entirely by touch users and some assistive technology, so anything a visitor must see belongs visibly on the page. Reserve tooltips for optional hints that enhance but are not required.
How Local Web Advisor checks this for you
Is your own website getting web design right?
Our free AI audit scans your site and tells you — in plain English — exactly what to fix for web design and seven other areas, with the business impact and the fix for each. No login needed to start.
Run my free website audit →Was this helpful?