STooltip <s-tooltip>

A short label that appears when another element is hovered or focused. STooltip is the typed Vue 3 wrapper for Shopify's Polaris <s-tooltip> web component.

import { STooltip } from 'polaris-vue-elements'

Best practices

• Use tooltips for extra, non-essential detail. They suit information that adds understanding but isn't required. Never hide errors, essential information or required instructions in a tooltip.
• Pair them with icon-only buttons. An icon button needs a tooltip to explain what it does; include the action and, if there is one, its keyboard shortcut.
• Keep the text brief. A short phrase or sentence is ideal. If the content runs long, it probably deserves a more visible spot in the UI.
• Treat many tooltips as a warning sign. If the interface needs lots of them to make sense, improve the labels, layout or information architecture instead.
• Remember touch devices. Tooltips only work on desktop and don't appear on touch screens, so show important information by default on mobile.

<SButton icon="delete" accessibilityLabel="Delete product" interestFor="delete-tip" />
<STooltip id="delete-tip">Delete product</STooltip>

See Shopify's best practices for <s-tooltip> for the full guidance.

Example

Hover or focus the button below to reveal the tooltip — it activates via interestFor, not a click.

Hover or focus meExtra context shown on hover or focus.

<script setup>
import { SButton, SText, STooltip } from 'polaris-vue-elements'
</script>

<template>
  <!-- interestFor activates the target on hover/focus, unlike commandFor which
       requires a click/activation. -->
  <SButton interestFor="example-tooltip">Hover or focus me</SButton>

  <STooltip id="example-tooltip">
    <SText>Extra context shown on hover or focus.</SText>
  </STooltip>
</template>

Props

Prop	Type	Description
id	string	A unique identifier for the element.

Slots

Slot	Description
default	The informational text or elements displayed within the tooltip overlay, providing helpful context or explanations when users interact with the associated element. Only accepts text, paragraph components, and raw textContent.