---
title: Migrate Tooltip to the Polaris tooltip component
description: >-
  Learn how to migrate the Tooltip component to Polaris web components in
  checkout and customer account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/tooltip
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/tooltip.md
---

# Migrate Tooltip to the Polaris tooltip component

The Polaris tooltip component displays floating labels that briefly explain the function of a user interface element. It replaces the previous [`Tooltip`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/overlays/tooltip) component and is available as [`<s-tooltip>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/overlays/tooltip) in API versions 2025-10 and newer.

***

## Removed properties

### overlay

The previous pattern of nesting `Tooltip` inside a trigger's `overlay` prop on `Pressable`, `Button`, or `Link` has been replaced. The `overlay` prop lived on the activator components — not on `Tooltip` itself — and is no longer supported. The tooltip is now rendered as a sibling element with an [`id`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/overlays/tooltip#properties-propertydetail-id), and the trigger references it with [`interestFor`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable#properties-propertydetail-interestfor).

The `interestFor` prop is available on [`<s-button>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/button#properties-propertydetail-interestfor), [`<s-clickable>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable#properties-propertydetail-interestfor), and [`<s-link>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/link#properties-propertydetail-interestfor). It sets the ID of the component that should respond to interest (hover and focus) on the trigger.

| Previous pattern | New pattern |
| - | - |
| `overlay={<Tooltip>…</Tooltip>}` on a trigger (`Button`, `Link`, or `Pressable`) | `interestFor="tooltip-id"` on the trigger pointing to a sibling `<s-tooltip id="tooltip-id">…</s-tooltip>` |

## Migrating Tooltip to s-tooltip with interestFor

##### Latest (Preact)

```tsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-stack direction="inline" gap="small-400" alignItems="center">
      <s-text>Contact phone number</s-text>
      <s-clickable interestFor="phone-tooltip">
        <s-icon type="question-circle-filled" />
      </s-clickable>
      <s-tooltip id="phone-tooltip">
        In case we need to contact you about your order
      </s-tooltip>
    </s-stack>
  );
}
```

##### Pre-Polaris (2025-07)

```tsx
import {
  reactExtension,
  Icon,
  InlineStack,
  Pressable,
  Text,
  Tooltip,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <InlineStack spacing="extraTight" blockAlignment="center">
      <Text>Contact phone number</Text>
      <Pressable
        overlay={
          <Tooltip>
            In case we need to contact you about your order
          </Tooltip>
        }
      >
        <Icon source="questionFill" />
      </Pressable>
    </InlineStack>
  );
}
```

***