Tooltip

Anchor to PropertiesProperties

Anchor to ExamplesExamples

Anchor to Add context to an iconAdd context to an icon

Attach a tooltip to an info icon to provide supplementary information on hover. This example shows a tooltip triggered by a pressable icon that explains why contact information is needed.

Add context to an icon

Add context to an icon

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/customer-account';

export default reactExtension(

'customer-account.page.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/customer-account';

export default extension('customer-account.page.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/customer-account';

export default reactExtension(
  'customer-account.page.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/customer-account';

export default extension('customer-account.page.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);
});

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

export default reactExtension(
  'customer-account.order-status.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <InlineStack spacing="base">
      <Pressable
        overlay={
          <Tooltip>Track your delivery</Tooltip>
        }
      >
        <Icon source="delivery" />
      </Pressable>
      <Pressable
        overlay={
          <Tooltip>Get help with this order</Tooltip>
        }
      >
        <Icon source="questionFill" />
      </Pressable>
    </InlineStack>
  );
}

import {
  extension,
  Icon,
  InlineStack,
  Pressable,
  Tooltip,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-status.block.render',
  (root) => {
    const tooltip1Fragment = root.createFragment();
    const tooltip1 = root.createComponent(
      Tooltip,
      {},
      'Track your delivery',
    );
    tooltip1Fragment.appendChild(tooltip1);

    const tooltip2Fragment = root.createFragment();
    const tooltip2 = root.createComponent(
      Tooltip,
      {},
      'Get help with this order',
    );
    tooltip2Fragment.appendChild(tooltip2);

    const stack = root.createComponent(
      InlineStack,
      {spacing: 'base'},
      [
        root.createComponent(
          Pressable,
          {overlay: tooltip1Fragment},
          [root.createComponent(Icon, {source: 'delivery'})],
        ),
        root.createComponent(
          Pressable,
          {overlay: tooltip2Fragment},
          [root.createComponent(Icon, {source: 'questionFill'})],
        ),
      ],
    );

    root.appendChild(stack);
  },
);

import {
  reactExtension,
  Badge,
  Pressable,
  Tooltip,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.order-status.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Pressable
      overlay={
        <Tooltip>
          Your order is being prepared and will
          ship within 1–2 business days
        </Tooltip>
      }
    >
      <Badge tone="info">Processing</Badge>
    </Pressable>
  );
}

import {
  extension,
  Badge,
  Pressable,
  Tooltip,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-status.block.render',
  (root) => {
    const tooltipFragment = root.createFragment();
    const tooltip = root.createComponent(
      Tooltip,
      {},
      'Your order is being prepared and will ship within 1\u20132 business days',
    );
    tooltipFragment.appendChild(tooltip);
    const pressable = root.createComponent(
      Pressable,
      {overlay: tooltipFragment},
      [root.createComponent(Badge, {tone: 'info'}, 'Processing')],
    );

    root.appendChild(pressable);
  },
);

Anchor to Best practicesBest practices

• Reserve tooltips for non-essential information: The component works best for supplementary details that enhance understanding without being critical. Never hide essential information, errors, or required instructions in tooltips.
• Add tooltips to icon-only elements: Icon buttons need tooltips to clarify what they do. Include the element's action to help customers work efficiently.
• Keep tooltip content brief and clear: Aim for a short sentence or phrase. Long tooltip content is hard to read and suggests the information might need a more prominent placement in the UI.
• Reconsider your design if many tooltips are needed: If you're adding many tooltips to explain your interface, the design itself might be unclear. Improve labels, layout, or information architecture instead.
• Design for touch-device fallbacks: If the information is important enough to need a tooltip, consider making it visible by default on mobile.

Anchor to LimitationsLimitations

• Tooltips only appear on devices with a mouse or trackpad. They don't work on touch devices like phones and tablets, which limits their usefulness for mobile customers.
• Tooltips can't contain interactive elements like links or buttons. They dismiss when the user moves away, making interaction impossible.
• The component doesn't provide built-in positioning controls. Tooltip placement is automatic and might not always appear in the ideal location for complex layouts.