---
title: Tooltip
description: |-
  The tooltip component displays helpful information in a small overlay when users hover over or focus on an element. Use tooltip to provide additional context, explain functionality, or clarify terms without cluttering the interface with permanent text.

  Tooltips support keyboard accessibility, positioning options, and activation on both hover and focus for inclusive interaction patterns.
api_version: 2026-01
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

The tooltip component displays helpful information in a small overlay when users hover over or focus on an element. Use tooltip to provide additional context, explain functionality, or clarify terms without cluttering the interface with permanent text.

Tooltips support keyboard accessibility, positioning options, and activation on both hover and focus for inclusive interaction patterns.

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