ツールチップ

ツールチップ（上下左右）

ツールチップのコンポーネントにはsu-tooltipのクラス名を使用します。

あわせて、data-su-textのカスタムデータ属性をツールチップ要素に対して設定します。属性値には文字列でツールチップで表示させるテキストを設定します。

span要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。ツールチップ要素内のテキストなどがスタイリングされます。

ホバー状態に合わせてオーバーレイのテキストを表示します。ツールチップ要素内のテキストが吹き出しのスタイルで適用されます。表示位置のバリエーションも提供されており、su-tooltip-top、su-tooltip-right、su-tooltip-bottom、su-tooltip-leftのクラス名を使用することで、上部、下部、左側、右側と表示位置を指定することができます。（クラス名を指定しない場合にはデフォルトは上部の表示になります）

<!-- 上部に表示 -->
<span class="su-tooltip su-tooltip-top" 
  data-su-text="上部に表示されるツールチップです"
  tabindex="0" 
  role="button" 
>
  ツールチップが上部に表示
</span>

<!-- 右側に表示 -->
<span class="su-tooltip su-tooltip-right" 
  data-su-text="右側に表示されるツールチップです"
  tabindex="0" 
  role="button" 
>
  ツールチップが右側に表示
</span>

<!-- 下部に表示 -->
<span class="su-tooltip su-tooltip-bottom" 
  data-su-text="下部に表示されるツールチップです"
  tabindex="0" 
  role="button" 
>
  ツールチップが下部に表示
</span>

<!-- 左側に表示 -->
<span class="su-tooltip su-tooltip-left" 
  data-su-text="左側に表示されるツールチップです"
  tabindex="0" 
  role="button" 
>
  ツールチップが左側に表示
</span>

ツールチップの角丸サイズや背景色、最大幅はCSS変数を使って変更することが可能です。

.su-tooltip {
  --su-color-bg-tooltip: rgba(255, 0, 0, 0.5);
  --su-size-radius-tooltip: 20px;
  --su-size-max-width-tooltip: 200px;
}

アクセシビリティの支援

ツールチップのコンポーネントではアクセシビリティの対応として、以下の属性を追加することを推奨します：

tabindex="0" - キーボードでフォーカス可能にする
role="button" - インタラクティブな要素であることを示す
aria-describedby - ツールチップとの関連性を示す（将来的にツールチップが実際のDOM要素として表示される場合）

これらの属性により、スクリーンリーダーユーザーやキーボードユーザーもツールチップ機能を利用できるようになります。

<!-- アクセシビリティ対応済みのツールチップ -->
<span class="su-tooltip su-tooltip-top" 
  data-su-text="ツールチップのテキスト"
  tabindex="0" 
  role="button" 
  aria-describedby="tooltip-description"
>
  ツールチップ表示要素
</span>
<span 
  id="tooltip-description"
  role="tooltip"
  aria-hidden="true"
>
  ツールチップのテキスト
</span>