STooltip <s-tooltip>

別の要素にホバーまたはフォーカスしたときに表示される短いラベル。 STooltip は、Shopify Polaris の <s-tooltip> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

• ツールチップは必須ではない補足情報に使う。 理解を深めるものの、必須ではない情報に適しています。エラー、重要な情報、必須の手順をツールチップの中に隠さないでください。
• アイコンのみのボタンと組み合わせる。 アイコンボタンには、何をするのかを説明するツールチップが必要です。アクションと、キーボードショートカットがあればそれも含めます。
• テキストは簡潔にする。 短いフレーズか 1 文が理想です。内容が長くなる場合は、UI 上のもっと目立つ場所に置くべきでしょう。
• ツールチップが多いのは危険信号と考える。 インターフェースを理解するのにツールチップが大量に必要なら、代わりにラベル、レイアウト、情報設計を改善します。
• タッチデバイスを忘れない。 ツールチップはデスクトップでしか機能せず、タッチスクリーンでは表示されないため、モバイルでは重要な情報をデフォルトで表示します。

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

詳しいガイダンスについては、<s-tooltip> に関する Shopify のベストプラクティス（英語）を参照してください。

例

下のボタンにホバーまたはフォーカスすると、ツールチップが表示されます。ツールチップはクリックではなく interestFor によって有効になります。

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	型	説明
id	string	要素の一意な識別子です。

Slots

Slot	説明
default	ツールチップのオーバーレイ内に表示される情報テキストまたは要素です。ユーザーが関連する要素を操作したときに、役立つコンテキストや説明を提供します。テキスト、段落コンポーネント、および生の textContent のみを受け付けます。