Tooltip
Floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover or focus.
Was this section helpful?
Code
<s-tooltip id="bold-tooltip">Bold</s-tooltip>
<s-button interestFor="bold-tooltip" accessibilityLabel="Bold">B</s-button>
examples
Code
<s-tooltip id="bold-tooltip">Bold</s-tooltip> <s-button interestFor="bold-tooltip" accessibilityLabel="Bold">B</s-button><!DOCTYPE html><html><head><style>html, body {height:100%} body {box-sizing: border-box; margin: 0; padding:0.5rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem;}</style><script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script></head><body> <s-tooltip id="bold-tooltip">Bold</s-tooltip> <s-button interestFor="bold-tooltip" accessibilityLabel="Bold">B</s-button> </body></html>