Skip to main content

Tooltip

Tooltips are floating labels that briefly explain the function of a user interface element. They must be specified inside the overlay prop of an activator component. Currently, activator components are Button, Link, and Pressable.

The library automatically applies the WAI-ARIA Tooltip Widget pattern to both the activator and the tooltip content. Expect screen readers to read the tooltip content when the user focuses the activator.

Anchor to tooltippropsTooltipProps

Anchor to id
id
string

A unique identifier for the component.

Was this section helpful?

Basic Tooltip

import {
reactExtension,
Icon,
Pressable,
Tooltip,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
return (
<Pressable
overlay={
<Tooltip>
In case we need to contact you about
your order
</Tooltip>
}
>
<Icon source="questionFill" />
</Pressable>
);
}

Preview

Anchor to best-practicesBest Practices

Use tooltips if:

  • It’s used for showing information only.

  • The information contained in it is not needed by someone to complete their checkout.

  • The information can be written in a sentence.

Was this section helpful?