--- title: Tooltip description: >- The tooltip component displays helpful information in a small overlay when buyers hover over or focus on an element. api_version: 2026-07-rc source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/overlays/tooltip md: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/overlays/tooltip.md api_name: checkout-ui-extensions --- # Tooltip The tooltip component displays helpful information in a small overlay when buyers 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/checkout-ui-extensions/2026-07-rc/web-components/overlays/popover) instead. Tooltips rely on `:hover` and `:focus` states, so they only appear on devices with a mouse or trackpad — they don't work on touch devices like phones and tablets. Per the [WAI-ARIA tooltip pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/), tooltips can't contain interactive elements like links or buttons. Placement is automatic and can't be configured. ### Support Targets (29) ### Supported targets * [purchase.​checkout.​actions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/navigation#navigation-target) * [purchase.​checkout.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/block#block-target) * [purchase.​checkout.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#line-item-targets) * [purchase.​checkout.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#checkout-cart-line-list-) * [purchase.​checkout.​contact.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/information#information-target) * [purchase.​checkout.​delivery-address.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-delivery-address-) * [purchase.​checkout.​delivery-address.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#delivery-address-targets) * [purchase.​checkout.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/footer#footer-target) * [purchase.​checkout.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/header#header-target) * [purchase.​checkout.​payment-method-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment#render-after-payment-methods-) * [purchase.​checkout.​payment-method-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment#payment-targets) * [purchase.​checkout.​pickup-location-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#render-after-pickup-locations-) * [purchase.​checkout.​pickup-location-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#location-list-targets) * [purchase.​checkout.​pickup-location-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#location-option-item-target) * [purchase.​checkout.​pickup-point-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points#render-after-pickup-points-) * [purchase.​checkout.​pickup-point-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points#pickup-points-targets) * [purchase.​checkout.​reductions.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#checkout-reductions-after-) * [purchase.​checkout.​reductions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#reductions-targets) * [purchase.​checkout.​shipping-option-item.​details.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#shipping-option-item-targets) * [purchase.​checkout.​shipping-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-shipping-option-) * [purchase.​checkout.​shipping-option-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-shipping-options-) * [purchase.​checkout.​shipping-option-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#shipping-option-list-targets) * [purchase.​thank-you.​announcement.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/announcement#thank-you-announcement-) * [purchase.​thank-you.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/block#block-target) * [purchase.​thank-you.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/order-summary#line-item-targets) * [purchase.​thank-you.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/order-summary#thank-you-cart-line-list-) * [purchase.​thank-you.​customer-information.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/information#information-target) * [purchase.​thank-you.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/footer#footer-target) * [purchase.​thank-you.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/header#header-target) #### Use cases * **Delivery details:** Explain shipping timeframes, express options, or carrier-specific information next to delivery estimates. * **Policy clarifications:** Provide brief explanations of duty, tax, or return policy terms inline with checkout totals. * **Feature guidance:** Describe what a field or option does when the label alone isn't sufficient. * **Insurance details:** Clarify coverage terms for optional add-ons like shipping insurance or extended warranties. *** ## 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 ### Show curbside pickup details Show extra details when a buyer hovers over or focuses on an element. This example adds a tooltip to an info icon beside an address, displaying curbside pickup instructions. ## Show curbside pickup details ![A rendered example of the tooltip component](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/tooltip-default-Byl3ncF_.png) ## html ```html 2600 Portland Street SE Curbside pickup is at the back of the warehouse. ``` ### Add delivery and duty details Display delivery and duty info next to checkout line items on hover. This example renders two tooltips, each attached to a clickable text element with `interestFor`. ## html ```html Estimated delivery: 3-5 business days Based on standard shipping to your region. Express options are available at checkout. Duties and taxes: included All applicable duties and import taxes are calculated and collected at checkout. ``` ### Show shipping insurance details Explain coverage terms for an optional add-on next to a help icon. This example uses a tooltip to show shipping insurance details alongside the add-on label. ## html ```html Shipping insurance Covers loss, theft, and damage during transit. File a claim within 30 days of delivery. ``` *** ## 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. Attach tooltips to info or question icons so buyers know additional context is available without cluttering the layout. * **Keep tooltip content brief and clear:** Limit tooltip content to one or two short sentences. For longer explanations, use a [popover](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/overlays/popover) instead. * **Use `interestFor` for accessible binding:** Connect the trigger element to the tooltip using `interestFor` and a matching `id` for proper keyboard and screen reader support. * **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. ***