---
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: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/tooltip
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/tooltip.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.

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

### Support Targets (25)

### Supported targets

* Customer​Account::Kitchen​Sink
* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

## TooltipProps

* **id**

  **string**

  A unique identifier for the component.

Examples

## Preview

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

### Examples

* #### Basic Tooltip

  ##### React

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

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

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