---
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.
api_version: 2026-04
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/overlays/tooltip
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/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 and activate on both hover and focus for inclusive interaction patterns. For interactive content like links or buttons, use [popover](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/overlays/popover) instead.

Tooltips only appear on devices with a mouse or trackpad — they don't work on touch devices like phones and tablets. Tooltips can't contain interactive elements like links or buttons, and placement is automatic and can't be configured.

### Support Targets (24)

### Supported targets

* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **Icon labels:** Describe the purpose of icon-only buttons so customers understand what each action does.
* **Term definitions:** Clarify unfamiliar terms, abbreviations, or statuses inline without adding permanent text.
* **Supplementary details:** Surface secondary information like estimated delivery dates or status explanations on demand.
* **Accessible descriptions:** Provide text alternatives for visual elements that screen readers can announce.

***

## Properties

Configure the following properties on the tooltip component.

* **id**

  **string**

  A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

***

## Examples

### Add context to an address

Show extra details when a customer hovers over or focuses on an element. This example adds a tooltip to an info icon beside a store address, displaying curbside pickup instructions.

## Add context to an address

![A small floating tooltip label appearing above a trigger element on hover.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/tooltip-default-Byl3ncF_.png)

## html

```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-stack>
<s-tooltip id="curbside-pickup-1">
  Curbside pickup is at the back of the warehouse.
</s-tooltip>
```

### Describe icon buttons

Clarify the purpose of icon-only buttons with a tooltip on each. This example attaches tooltips to a delivery icon and an info icon, describing the action behind each one.

## html

```html
<s-stack direction="inline" gap="small-400">
  <s-clickable interestFor="track-tooltip">
    <s-icon type="delivery" />
  </s-clickable>
  <s-clickable interestFor="help-tooltip">
    <s-icon type="info" />
  </s-clickable>
</s-stack>
<s-tooltip id="track-tooltip">Track your order</s-tooltip>
<s-tooltip id="help-tooltip">Get help with this order</s-tooltip>
```

### Explain a status badge

Explain what a status means by wrapping a badge in a clickable tooltip trigger. This example shows a "Processing" badge with a tooltip describing next steps for the customer.

## html

```html
<s-stack direction="inline" gap="small-400" alignItems="center">
  <s-text>Order status:</s-text>
  <s-clickable interestFor="status-tooltip">
    <s-badge>Processing</s-badge>
  </s-clickable>
</s-stack>
<s-tooltip id="status-tooltip">
  Your order is being prepared for shipment. You'll receive a tracking number by email once it ships.
</s-tooltip>
```

***

## Best practices

* **Reserve tooltips for non-essential information:** The component works best for supplementary details that enhance understanding without being critical. Never hide essential information, errors, or required instructions in tooltips.
* **Add tooltips to icon-only elements:** Icon buttons need tooltips to clarify what they do. Include the element's action to help customers work efficiently.
* **Keep tooltip content brief and clear:** Aim for a short sentence or phrase. Long tooltip content is hard to read and suggests the information might need a more prominent placement in the UI.
* **Reconsider your design if many tooltips are needed:** If you're adding many tooltips to explain your interface, the design itself might be unclear. Improve labels, layout, or information architecture instead.
* **Design for touch-device fallbacks:** If the information is important enough to need a tooltip, consider making it visible by default on mobile.

***