Components

Tooltip(React)

Floating labels providing context.

Version:14.18.2 •View source•Changelog•Report issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { Tooltip } from '@thumbtack/thumbprint-react';

Basic tooltips on icons

Hover, click, or focus on the tooltip to open it.

Screen readers will announce the Tooltip component text when the button receives focus.

Rich tooltips on icons

Hover, click, or focus on the tooltip to open rich tooltip with link inside tooltip content.

Light tooltip on a dark background

The theme prop makes it possible to use tooltips on dark backgrounds.

Tooltips can also be used with the Link and ThemedLink components.

Props

Tooltip

  • children
    required

    A function that renders JSX and receives an object with ref, onMouseEnter, onFocus, onMouseLeave, onBlur, onClick, and ariaLabel. All of these props must be added to the component within the render prop.

    Type
    (args: ChildrenPropTypes) => JSX.Element
  • text
    required

    Plain text that will appear within the tooltip. Links and formatted content are not allowed.

    Type
    string
  • cta

    Tooltip cta in form of text button/link for rich tooltip

    Type

    This prop can be one of the following 2 types:

    • { type: 'link'; href: string; text: string; onClick?: () => void; }
    • { type: 'button'; onClick: () => void; text: string; }
  • theme

    Controls the look of the tooltip.

    Type

    This prop can be one of the following 2 types:

    • 'light'
    • 'dark'
    Default
    'dark'
  • position

    Determines where the tooltip will attempt to position itself relative to the children. The tooltip will reposition itself to fit within the contianer.

    Type

    This prop can be one of the following 2 types:

    • 'top'
    • 'bottom'
    Default
    'top'
  • closeDelayLength

    Number in milliseconds that determines how long to wait before closing the tooltip when the onMouseLeave event fires. A small delay prevents the tooltip from closing if the user moves their cursor from the button to the tooltip. This value should only be set to 0 when two or more tooltip components are used near each other.

    Type

    This prop can be one of the following 2 types:

    • 0
    • 200
    Default
    200
  • container

    By default tooltips will render right before the </body> tag.

    Setting the container to inline causes the tooltip to remain where it was added to the DOM.

    This option is helpful to work around z-index and positioning issues.

    Type

    This prop can be one of the following 2 types:

    • 'inline'
    • 'body'
    Default
    'body'
  • zIndex

    Adds a z-index to the tooltip. Before using this prop, try to use container="inline".

    Type
    number
  • persistTooltipOnClick

    Persist tooltip and not hide on click

    Type
    boolean