Choose a version:

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

In case we need to contact you about

your order

</Tooltip>

}

>

</Pressable>

);

}

examples

Basic Tooltip

React

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>
  );
}

JS

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);
});

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?