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 component and is available as <s-tooltip> in API versions 2025-10 and newer.

Anchor to Removed propertiesRemoved properties

Anchor to overlayoverlay

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, and the trigger references it with interestFor.

The interestFor prop is available on <s-button>, <s-clickable>, and <s-link>. It sets the ID of the component that should respond to interest (hover and focus) on the trigger.

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

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