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 buyer focuses the activator.

Anchor to TooltipPropsTooltipProps

Anchor to ExamplesExamples

Anchor to Basic TooltipBasic Tooltip

Basic Tooltip

Basic Tooltip

ReactJS

Copy

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

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>

);

}

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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

});

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

Anchor to Best PracticesBest Practices

Use tooltips if:

• It’s used for showing information only.

• The information contained in it isn't needed by the buyer to complete their checkout.

• The information can be written in a sentence.