@thumbtack/tp-ui-react-tooltip v1.2.4

package: '@thumbtack/tp-ui-react-tooltip' kit: component/tooltip.yaml platform: react

url: /api/components/component/tooltip/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.

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

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>