---
title: Tooltip
navTitle: Tooltip
summaryParagraph: Tooltips are floating labels to describe or add additional information when users hover over, focus on, or click an interactive element. Use sparingly.
tags: ["Popover", "Data viz tooltip"]
needToKnow:
- Tooltips are used to provide additional information when space is tight.
- Tooltips should be concise but can be rendered with one or more lines of text.
- Tooltips must be accessible via hover, focus or click.
- Trigger tooltips from Interactive elements (Buttons, Links, Icon buttons) or Non-interactive elements (Icons, Abbreviations, Truncated text)—be mindful of keyboard accessibility
- Use sparingly. Tooltips innately hide information. Consider exposing it immediately without a tooltip or removing it completely.
demoStoryId: tooltip-react--default-below-kaizen-site-demo
demoStoryHeight: 100px
---

## Visuals

### UI Kit

<iframe style="border: none;" width="744" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe3TyAOZKfLg9cA01Iy1Mgm%2FKaizen-Site-embed%3Fnode-id%3D205%253A12158" allowfullscreen></iframe>

## To keep in mind

*   Anatomy:
    *   The anatomy of a tooltip is made up of a **container**, **description** and **tip** (i.e. arrow).
    *   A tooltip is connected to a **trigger** element, such as a button or icon, that shows the tooltip when the interactive trigger element is hovered, focused, or clicked. (More details below.)
*   Description:
    *   Succinctly describe or expand on the element they point to.
    *   Use a short description (2-3 words) but can extend to a short sentence (max).
    *   Provide useful, additional information or clarification.
*   Visual details:
    *   Text and tips within tooltips can be left, centered and right aligned, as appropriate within its environmental context.
    *   Use strong signifiers for trigger elements to ensure the tooltip is discoverable.
    *   The proximity of tooltips is always paired nearby the element with which they are associated.
    *   Don’t crop tooltips e.g. at the edge of modals.
*   Trigger:
    *   Needs to be discoverable:
        *   E.g. something like an icon to tell you there’s a tooltip
        *   E.g. show the first tooltip/popover immediately on page load so people know they’re there
        *   Avoid triggering tooltips from text without indicators that the text has behaviour
    *   Needs to not be noisy (e.g. we don’t litter UI with icons all the time)
    *   Only trigger tooltips from:
        *   Interactive elements:
            *   Buttons
            *   Links
            *   Icon buttons
        *   Non-interactive elements (be mindful of keyboard accessibility):
            *   Icons
            *   Abbreviations (e.g. dashed underlined text for HRIS that shows a tooltip that says Human Resource Information System)
            *   Truncated text
    *   For interactive elements that trigger tooltips, only have optional information in the tooltip because it could be missed when the user clicks.
*   Moods:
    *   When combined with an icon, use the matching icon and mood (Positive, Informative, Cautionary, Negative). For example, when using a Lapis (blue) colored information icon, show an informative tooltip.
    *   When used without an icon, use the Default tooltip (white).
*   Animation details:
    *   A Tooltip **lifts up** from the **trigger point**, by “slide fading” towards the top of the screen away from the trigger point. Related: Tooltip arrows always point down and “slide fade” upwards unless they're at a viewport edge, then the tooltip should move in the opposite (and most logical) direction.
*   Amount:
    *   Use sparingly. If you’re building something that requires a lot of tooltips, work on clarifying the design and the language in the experience.
    *   Only show 1 tooltip at a time.
*   Accessibility:
    *   Tooltips contain limited content so we can use an ‘announcer’ to announce tooltip content to people using screen readers e.g. using an ARIA live region.
    *   In contrast, a user might interact with a Popover, requiring focus, so we need to move focus to the Popover when it’s triggered and support keyboard navigation to dismiss a dismissible Popover.
*   Use sparingly. Tooltips innately hide information. Consider exposing it immediately without a tooltip or removing it completely.

## When to use

*   Use when the description content would be too much information to include inline or create too much clutter. For example, when expert users have seen it many times.
*   Use for icon-only buttons or for a button with an associated keyboard shortcut.

## When not to use

*   Don’t use tooltips to restate visible UI text.
*   If you need lots of tooltips and icons to trigger them, consider an onboarding pattern instead, such as coachmarks.
*   To communicate critical information, including errors in forms or other interaction feedback. Consider using [Modals](/components/modal) or [Notifications](/guidelines/notifications)
*   Not contain any links or buttons. Consider using a [Popover](/components/popover).

## See also

*   [Overview: tooltips, popovers, modals](/guidelines/checkbox-radio-toggle-switch/)
    *   [Popovers](/components/popover)
    *   [Modals](/components/modal)

## External Links

- [Material: tooltip](https://material.io/design/components/tooltips.html)
- [Lightning: tooltip](https://www.lightningdesignsystem.com/accessibility/patterns/tooltip/#site-main-content)
- [Polaris: tooltip](https://polaris.shopify.com/components/overlays/tooltip)
- [Atlassian: tooltips](https://www.atlassian.design/guidelines/product/components/tooltips)
- [Quickbooks: tooltips](https://designsystem.quickbooks.com/component/tooltips/)
- [Ant Design: tooltip](https://ant.design/components/tooltip/#header)
- [Predix UI: tooltip](https://www.predix-ui.com/#/elements/px-tooltip)
- [W3C tooltip](http://w3c.github.io/aria-practices/#tooltip)
- [Ant Design: feedback](https://ant.design/docs/spec/feedback)