---
title: Tooltip
description: >-
  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.
api_version: 2025-07
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/overlays/tooltip
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/overlays/tooltip.md
---

# 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](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.

## TooltipProps

* id

  string

  A unique identifier for the component.

### Examples

* #### Basic Tooltip

  ##### React

  ```tsx
  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

  ```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

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/tooltip-default.png)

## Best 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.