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](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) to both the activator and the tooltip content. Expect screen readers to read the tooltip content when the user focuses the activator.
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>
);
}
import {
extension,
Icon,
Pressable,
Tooltip,
} from '@shopify/ui-extensions/checkout';
export default extension('purchase.checkout.block.render', (root) => {
const tooltipFragment = root.createFragment();
const tooltip = root.createComponent(
Tooltip,
{},
'In case we need to contact you about your order',
);
tooltipFragment.appendChild(tooltip);
const pressable = root.createComponent(
Pressable,
{overlay: tooltipFragment},
[root.createComponent(Icon, {source: 'questionFill'})],
);
root.appendChild(pressable);
});
A unique identifier for the component.