---
title: Tooltip
description: Displays helpful information in a small overlay when users hover or focus on an element. Use to provide additional context without cluttering the interface.
api_version: 2025-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/overlays/tooltip
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/overlays/tooltip.md
---

# Tooltip

Displays helpful information in a small overlay when users hover or focus on an element. Use to provide additional context without cluttering the interface.

## Properties

* id

  string

  A unique identifier for the element.

### Examples

* #### Code

  ##### Default

  ```html
  <s-stack direction="inline" gap="small-400" alignItems="center">
    <s-text color="subdued">2600 Portland Street SE</s-text>
    <s-clickable interestFor="curbside-pickup-1">
      <s-icon type="info-filled" />
    </s-clickable>
    <s-tooltip id="curbside-pickup-1">
      Curbside pickup is at the back of the warehouse.
    </s-tooltip>
  </s-stack>
  ```

## Preview

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