Tooltip

要素にマウスホバーした際に追加情報を表示するコンポーネント。アイコンやボタンの説明に使用します。

Basic

jui-tooltip の最も基本的な使用例です。

関連コンポーネント

• Popover - ポップオーバー

アクセシビリティ

• WAI-ARIA:
  • ツールチップ要素には role="tooltip" が自動的に付与されます。
  • トリガー要素には aria-describedby が設定され、ツールチップの内容がスクリーンリーダーで読み上げられます。
  • disabled の場合、ツールチップは表示されません。
• キーボードナビゲーション:
  • トリガー要素にフォーカスするとツールチップが表示されます（focus イベント）。
  • マウスホバー時にもツールチップが表示されます（mouseenter イベント）。
  • delay プロパティで表示までの遅延時間を制御でき、誤表示を防止します（デフォルト: 400ms）。

CSS カスタムプロパティ

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークン（--jui-color-text, --jui-color-background-inverse, --jui-radius-sm, --jui-font-size-sm 等）を参照してスタイルが適用されます。

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
CSS Custom Properties	デザイントークン	49+	31+	9.1+	Baseline 2016
::slotted()	Shadow DOM スロットスタイル	53+	63+	10+	Baseline 2018
:focus-within	フォーカス時のスタイル変更	60+	52+	10.1+	Baseline 2017
prefers-reduced-motion	アニメーション抑制	74+	63+	10.1+	Baseline 2020

💡 いずれの機能も Baseline 2020 以前に到達しており、主要ブラウザで広く対応済みです。

Baseline 情報

機能	Baseline 達成	Widely Available 予定
CSS Custom Properties	2016年	2019年 ✅
:focus-within	2017年	2020年 ✅
::slotted()	2018年	2021年 ✅
prefers-reduced-motion	2020年	2023年 ✅

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
closeDelay	close-delay	非表示遅延（ms）	number	0
color	color	カラー	"brand" | "danger" | "default" | "success" | "warning"	'default'
content	content	ツールチップ内容	string	''
delay	delay	表示遅延（ms）	number	400
disabled	disabled	無効状態	boolean	false
placement	placement	配置方向	"bottom" | "left" | "right" | "top"	'top'
showArrow	show-arrow	アロー表示	boolean	true

スロット

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
	トリガー要素

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
"arrow"	アロー
"tooltip"	ツールチップ本体

---

Built with StencilJS