---
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: 2026-01
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/typography-and-content/tooltip
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/typography-and-content/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

## Preview

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

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