Thumbprint logo

Tooltip

Floating labels providing context

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.

<div
    style={{
        minHeight: '120px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    }}
>
    <Tooltip text="This is a default tooltip.">
        {({ ref, onMouseEnter, onClick, onFocus, onMouseLeave, onBlur, ariaLabel }) => (
            <TextButton
                iconLeft={<NotificationAlertsHelpSmall />}
                theme="inherit"
                accessibilityLabel={ariaLabel}
                onMouseEnter={onMouseEnter}
                onClick={onClick}
                onFocus={onFocus}
                onMouseLeave={onMouseLeave}
                onBlur={onBlur}
                ref={ref}
            />
        )}
    </Tooltip>
</div>

Rich tooltips on icons

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

<div
    style={{
        minHeight: '120px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    }}
>
    <Tooltip
        text="This is a rich tooltip. For more details visit "
        container="inline"
        zIndex={500}
        cta={{
            type: 'link',
            href: 'https://thumbprint.design/',
            text: 'Thumbprint.design',
        }}
        persistTooltipOnClick
    >
        {({ ref, onMouseEnter, onClick, onFocus, onMouseLeave, onBlur, ariaLabel }) => (
            <TextButton
                iconLeft={<NotificationAlertsHelpSmall />}
                theme="inherit"
                accessibilityLabel={ariaLabel}
                onMouseEnter={onMouseEnter}
                onClick={onClick}
                onFocus={onFocus}
                onMouseLeave={onMouseLeave}
                onBlur={onBlur}
                ref={ref}
            />
        )}
    </Tooltip>
</div>

Light tooltip on a dark background

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

<div
    style={{
        minHeight: '120px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: '#fff',
    }}
>
    <Tooltip text="This is a default tooltip." theme="light">
        {({ ref, onMouseEnter, onClick, onFocus, onMouseLeave, onBlur, ariaLabel }) => (
            <TextButton
                iconLeft={<NotificationAlertsHelpSmall />}
                theme="inherit"
                accessibilityLabel={ariaLabel}
                onMouseEnter={onMouseEnter}
                onClick={onClick}
                onFocus={onFocus}
                onMouseLeave={onMouseLeave}
                onBlur={onBlur}
                ref={ref}
            />
        )}
    </Tooltip>
</div>

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

<div
    style={{
        minHeight: '120px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    }}
>
    <Tooltip text="This is a tooltip for a link">
        {({ ref, onMouseEnter, onClick, onFocus, onMouseLeave, onBlur, ariaLabel }) => (
            <Link
                accessibilityLabel={ariaLabel}
                onMouseEnter={onMouseEnter}
                onClick={onClick}
                onFocus={onFocus}
                onMouseLeave={onMouseLeave}
                onBlur={onBlur}
                ref={ref}
                to="#"
            >
                Next
            </Link>
        )}
    </Tooltip>
</div>

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
    | { type: 'link'; href: string; text: string; onClick?: () => void; } | { type: 'button'; onClick: () => void; text: string; }
  • theme

    Controls the look of the tooltip.

    Type
    '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
    '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
    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
    '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