Skip to main content

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

Anchor to PropertiesProperties

Configure the following properties on the tooltip component.

Anchor to id
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.

Anchor to ExamplesExamples

Anchor to Add context to an addressAdd 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.

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>

Anchor to Describe icon buttonsDescribe 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

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

Anchor to Explain a status badgeExplain 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

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

Anchor to Best practicesBest 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.
Was this page helpful?