Tooltip

Updated:

Provides inline tooltip text around any element.

Properties

Learn more about properties.

block

Displays the element as a block, making it take up the full width of its container.

focusable

Makes the component focusable, thereby putting it in the tab order of the keyboard.

This is only meant to be used when the q2-tooltip is wrapped around an element that is not focusable (e.g., icons, static text, badges, etc.).

immediate

Whether to show the tooltip immediately upon hover.

label

text that is displayed when the tooltip is activated.

multiline

Enables the use of multi-line tooltips with a default max-width of 200px.

persistent

Displays the tooltip persistently.

position

The position of the tooltip based on cardinal and intercardinal directions.

Dependencies

This component uses other components in the Tecton library, including:

    Dependents

    Other components in the Tecton library use this component, including:

    • q2-meter

    Release Notes

    Initial Release

    Best Practices

    • Associate the tooltip with a focusable element.
      Tooltip content comes from the aria-label of the tooltipped element, so only tooltip focusable elements (e.g., links and buttons) to ensure that keyboard-only users can access the tooltip.
    • Be concise.
      If you need more than a few words in your tooltip, the content may be important enough to expose directly in the UI rather than in a tooltip.
    • Use tooltips sparingly.
      Tooltips are transient (only showing during hover or focus) and must be discovered (only visible during focus/hover). If your page or feature uses tooltips heavily, consider how successful the design is without them: users may fail to discover the tooltip, or they may find it difficult to remember the content when it's no longer displayed. Can users still complete tasks successfully? Are there ways to clarify the design without using tooltips?
    • Be mindful of the screen reader experience
      Tooltip content comes from the aria-label of the tooltipped element, so any other text within the tooltipped element, such as a button label, is not announced to screen readers - only the tooltip content.

    Avoid

    • Using tooltips to communicate critical information, such as form guidance or error messages.
      Tooltips are for additional, supplementary information - not information a user needs to complete a task.
    • Repetitive tooltips in the same view.
      Using the same tooltip content multiple times in the same view may be a symptom of a different design problem. Should you surface that tooltip content in a different way, like a group label or an inline message? Is there a clearer icon you could use for your button?
    • Tooltip positions that block related content.
      Tooltips appear while the tooltipped element is hovered or focused. If the tooltip blocks content your user needs while the tooltip is open, your user has to move the cursor to dismiss the tooltip to access the blocked content.

    Accessibility Report

    Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

    The following CSS variables are available to override the default theme styles of the q2-tooltipcomponent.