--- title: "Tooltip UI: anatomy, variants and examples | Kombai" description: "A tooltip is a short label that appears next to an element when people hover over it or focus it, and goes away when they move on." canonical_url: https://kombai.com/glossary/tooltip/ author: "The Kombai Team" --- # Tooltip A tooltip is a short label that appears next to an element when people hover over it or focus it, and goes away when they move on. - Also called: hint, info tip - Platforms: Web, Mobile - [Juniperlane](https://kombai.com/gallery/inspirations/status-icon-ios-18/) (Mobile) - [Casa Verdello](https://kombai.com/gallery/inspirations/accordion-web-39/) (Web) - [Sonorra](https://kombai.com/gallery/inspirations/slider-ios-24/) (Mobile) ## What is a tooltip? A tooltip is a small floating label tied to one element on the screen. It names an icon button, gives the exact value under a chart point or explains a term in a line or two. It appears when people hover over the element or move keyboard focus to it, and it disappears when they move away or press Escape. It never takes focus itself and holds nothing to click. - It sits right next to its trigger, often with a small arrow pointing back at it. - Its text is short, usually a few words, and it adds to what the element already shows. ## When to use tooltip - **Icon buttons.** Naming a button that shows only an icon, plus its keyboard shortcut. - **Exact values.** The number under a chart point, a map region or a slider handle. - **A term people may not know.** One line that explains a label, like a fee or a plan limit. ## When not to use one - **Information people need.** Hover is easy to miss and does not exist on touch screens. Put it on the page. - **Links, buttons or fields.** A tooltip cannot hold anything to click. Use a popover. - **Errors and warnings.** Show problems inline next to the field, where they stay visible. ## Anatomy 1. **Trigger**: The element it describes 2. **Container**: A small, high-contrast box 3. **Label**: A few words, no links 4. **Arrow**: Points back at the trigger 5. **Shortcut**: An optional key hint 6. **States**: Hidden, hover, focus ## Variants We sorted the tooltip designs we found across the Kombai gallery into five patterns. ### 1. Labels on hover A name, and sometimes a shortcut or a short quote, shown over an icon or avatar that has no visible text. - [Portside](https://kombai.com/gallery/inspirations/feature-info-web-40/) (Web) - [Sablewave](https://kombai.com/gallery/inspirations/social-links-web-31/) (Web) - [Vellum](https://kombai.com/gallery/inspirations/customers-case-studies-web-4/) (Web) ### 2. Chart data tooltips The date and exact values under the point or bar people are pointing at, often one row per series. - [Kilnwork](https://kombai.com/gallery/inspirations/charts-ios-127/) (Mobile) - [Halden](https://kombai.com/gallery/inspirations/charts-web-110/) (Web) - [Loomcraft](https://kombai.com/gallery/inspirations/dashboards-web-240/) (Web) ### 3. Slider values A bubble over the handle that shows the current value, like a budget range or a monthly volume, while people drag. - [Duskmoor](https://kombai.com/gallery/inspirations/slider-ios-13/) (Mobile) - [Sablewood](https://kombai.com/gallery/inspirations/slider-ios-35/) (Mobile) - [Kestrelbank](https://kombai.com/gallery/inspirations/slider-web-55/) (Web) ### 4. Map tooltips A label on a pin or a region, like where an order will land or the numbers for one country. - [Prontly](https://kombai.com/gallery/inspirations/drawer-ios-166/) (Mobile) - [Meadowcart](https://kombai.com/gallery/inspirations/forms-ios-90/) (Mobile) - [Sprigg](https://kombai.com/gallery/inspirations/dashboards-web-328/) (Web) ### 5. Hints A small bubble with one line of advice pointing at a control, like checking an address or saving a story for later. - [Kerbside](https://kombai.com/gallery/inspirations/header-ios-7/) (Mobile) - [Harbor & Pine](https://kombai.com/gallery/inspirations/avatar-ios-9/) (Mobile) - [Solene](https://kombai.com/gallery/inspirations/stories-ios-27/) (Mobile) ## Where tooltips show up ### Help inside forms Password rules that tick off as people type, and the type and value behind a field, shown right next to it. - [Tideline](https://kombai.com/gallery/inspirations/error-web-34/) (Web) - [Ashgrove](https://kombai.com/gallery/inspirations/button-web-11/) (Web) - [Ironwood](https://kombai.com/gallery/inspirations/text-area-web-51/) (Web) ### Charts on marketing pages A pinned tooltip on a product chart that calls out one number, like earnings or a resolution rate. - [Pinecrest](https://kombai.com/gallery/inspirations/pricing-page-ios-13/) (Mobile) - [Havenmark Affiliates](https://kombai.com/gallery/inspirations/partners-page-web-2/) (Web) - [Umbercall](https://kombai.com/gallery/inspirations/features-web-22/) (Web) ### First-time tips One line next to a control that explains a default or a change the first time people see it, then goes away. - [Baseline](https://kombai.com/gallery/inspirations/accordion-ios-27/) (Mobile) - [Perch](https://kombai.com/gallery/inspirations/add-and-create-ios-3/) (Mobile) - [Fathomry](https://kombai.com/gallery/inspirations/map-ios-14/) (Mobile) ## Tooltip vs similar components | | [Tooltip](https://kombai.com/glossary/tooltip/) | [Popover](https://kombai.com/glossary/popover/) | [Coach marks](https://kombai.com/glossary/coach-marks/) | |---|---|---|---| | Opens on | Hover or keyboard focus | A click or tap | Its own, during a tour | | Holds | A few words of text | Text, buttons and fields | A title, a line and a next step | | Best for | Naming and exact values | Small tasks in context | Teaching new users a feature | ## Build notes - Give the tooltip role="tooltip" and point the trigger at it with aria-describedby. For an icon-only button, use the tooltip text as its name with aria-labelledby instead. - Show it on keyboard focus as well as on hover, and hide it on blur. - Escape hides it without moving focus, as WCAG 1.4.13 asks. - Keep it open while the pointer moves from the trigger onto the tooltip, so people can read or zoom it. - Wait a short delay before showing it on hover, so it does not flash as the pointer passes, and show the next one right away while people move along a toolbar. - Don't put links or buttons inside. A tooltip never takes focus, so keyboard users can't reach them. ## FAQ ### What's the difference between a tooltip and a popover? A tooltip shows a few words when people hover over or focus an element, and it never takes focus. A popover opens on a click, can hold buttons, links and fields, and stays open until people close it. ### Do tooltips work on mobile? Touch screens have no hover, so a hover tooltip never appears. On mobile, show the information on the page, use a long press for icon labels, or open a popover or a sheet on tap. Slider and chart tooltips still work, because they follow the finger while it is down. ### Should I put a tooltip on a disabled button? A disabled