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 propertiesProperties
- string
A unique identifier for the element.
Was this section helpful?
Code
<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>
Examples
Code
Default
<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>
Preview
