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.

Anchor to slotsSlots

Anchor to children children HTMLElement: The content of the Tooltip.

Only accepts Text, Paragraph components, and raw textContent.

Anchor to slotsSlots

Anchor to children children HTMLElement: The content of the Tooltip.

Only accepts Text, Paragraph components, and raw textContent.

Examples

<s-tooltip id="bold-tooltip">Bold</s-tooltip>

<s-button interestFor="bold-tooltip" accessibilityLabel="Bold">

</s-button>

</>

Preview

Examples

Code

jsx

<>
  <s-tooltip id="bold-tooltip">Bold</s-tooltip>
  <s-button interestFor="bold-tooltip" accessibilityLabel="Bold">
    B
  </s-button>
</>

html

<s-tooltip id="bold-tooltip">Bold</s-tooltip>
<s-button interestFor="bold-tooltip" accessibilityLabel="Bold">B</s-button>

Basic Usage

Description

Demonstrates a simple tooltip that provides additional context for a text element when hovered or focused.

jsx

<>
  <s-tooltip id="shipping-status-tooltip">
    <s-text>This order has shipping labels.</s-text>
  </s-tooltip>
  <s-text interestFor="shipping-status-tooltip">Shipping status</s-text>
</>

html

<s-tooltip id="shipping-status-tooltip">
  <s-text>This order has shipping labels.</s-text>
</s-tooltip>
<s-text interestFor="shipping-status-tooltip">Shipping status</s-text>

With Icon Button

Description

Shows how to add a tooltip to an icon button, providing a clear explanation of the button's action when hovered.

jsx

<>
  <s-tooltip id="delete-button-tooltip">
    <s-text>Delete item permanently</s-text>
  </s-tooltip>
  <s-button interestFor="delete-button-tooltip">
    <s-icon tone="neutral" type="info" />
  </s-button>
</>

html

<s-tooltip id="delete-button-tooltip">
  <s-text>Delete item permanently</s-text>
</s-tooltip>
<s-button interestFor="delete-button-tooltip">
  <s-icon tone="neutral" type="info"></s-icon>
</s-button>

Anchor to usageUsage

Tooltips only render on devices with a pointer and do not display on mobile devices.

Anchor to best-practicesBest practices

Use for additional, non-essential context only
Provide for icon-only buttons or buttons with keyboard shortcuts
Keep content concise and in sentence case
Don't use for critical information, errors, or blocking messages
Don't contain any links or buttons
Use sparingly. If you need many tooltips, clarify the design and language instead

Was this page helpful?