React Tooltip (ツールチップ)
Ignite UI for React Tooltip コンポーネントは、特定の要素のツールチップを表示する方法を提供します。ツールチップは、通常、要素がキーボード フォーカスを受け取ったとき、またはマウスを要素の上に置いたときに、要素に関連する情報を表示するポップアップです。
Ignite UI for React Tooltip の例
作業の開始
IgrTooltip の使用を開始するには、最初に次のコマンドを実行して Ignite UI for React をインストールする必要があります。
npm install igniteui-react
次に、以下のように、IgrTooltip とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
import { IgrTooltip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
これで、React IgrTooltip の基本構成から始めることができます。
<IgrTooltip anchor="hover-button">
Congrats you have hovered the button!
</IgrTooltip>
<IgrButton id="hover-button">Hover me</IgrButton>
Ignite UI for React の完全な概要については、作業の開始トピックを参照してください。
使用方法
ツールチップ ターゲット
目的の要素にツールチップを添付するには、<IgrTooltip> 要素の anchor プロパティを使用します。このプロパティは、要素 ID または要素への直接参照のいずれかを受け入れます。ID 参照を使用する場合は、anchor プロパティをターゲット要素の ID に設定するだけです。
<IgrButton id="target-button">Hover me</IgrButton>
<IgrTooltip anchor="target-button">
Congrats you have hovered the button!
</IgrTooltip>
要素インスタンスを直接渡すことでターゲットを指定することもできます。
const anchor = document.querySelector('#hover-button') as IgrButton;
const tooltip = document.querySelector('#tooltip') as IgrTooltip;
tooltip.anchor = anchor;
<IgrTooltip id="tooltip">
Congrats you have hovered the button!
</IgrTooltip>
<IgrButton id="hover-button">Hover me</IgrButton>
ツールチップのコンテンツ
ツールチップのコンテンツは、<IgrTooltip> 要素の開始タグと終了タグの間にカスタム コンテンツを配置することによって定義されます。
<IgrTooltip>
Congrats you have hovered the button!
</IgrTooltip>
あるいは、単純なテキストを設定するには、message プロパティを使用できます。
<IgrTooltip message="This is my custom content here."></IgrTooltip>
両方の方法 (スロット化されたコンテンツと message プロパティ) を使用する場合、スロット化されたコンテンツが優先され、message 値は無視されます。
<IgrButton id="target-button">Hover me</IgrButton>
<IgrTooltip anchor="target-button" message="I will be hidden.">
I will be shown!
</IgrTooltip>
この例では、スロット化されたコンテンツ 「I will be shown!」 が message プロパティ値の代わりに表示されます。
IgrTooltip のコンテンツは単なるテキスト以上のものになります。ツールチップはマークアップ内の通常の要素であるため、必要な要素を追加し、それに応じてスタイルを設定することで、そのコンテンツを強化できます。
設定の表示/非表示
IgrTooltip を表示および非表示にする前の遅延を制御する場合は、showDelay プロパティと hideDelay プロパティを使用できます。どちらのプロパティも、時間をミリ秒単位で表す数値を受け入れます。
<IgrTooltip show-delay="600" hide-delay="800">
Her name is Madelyn James.
</IgrTooltip>
[!NOTE] Tooltip API メソッド (
show、hide、toggle) では、showDelayプロパティとhideDelayプロパティが考慮されないことに注意することが重要です。呼び出されるとすぐに動作します。
配置
IgrTooltip は、ターゲット要素を基準にして簡単に配置することもできます。必要なのは、placement プロパティを、top、top-start、top-end、bottom、bottom-start、bottom-end 、right、right-start、right-end、left、left-start、left-end のいずれかの位置オプションとともに使用するだけです。
placement プロパティが設定されていない場合、デフォルト値は "top" となり、IgrTooltip はターゲット要素の上に配置されます。
さらに、sticky プロパティを使用して IgrTooltip を固定することができます。これにより、閉じるボタンが追加され、ユーザーが閉じるボタンをクリックするか、Esc キーを押して手動で閉じるまで、IgrTooltip が表示されたままになります。この動作はデフォルトのホバー動作をオーバーライドし、ユーザーがターゲット要素上でホバーを停止したときに IgrTooltip が消えないようにします。
<IgrButton id="target-button">Hover me</IgrButton>
<IgrTooltip anchor="target-button" placement="top-start" sticky>
Congrats you have hovered the button!
</IgrTooltip>
次の例では、すべての位置オプションと sticky プロパティの動作のデモを見ることができます。
トリガー
デフォルトでは、IgrTooltip はターゲット要素の上にマウスを移動したときにのみトリガーされます。ただし、showTriggers プロパティと hideTriggers プロパティを使用してこの動作を変更し、IgrTooltip が表示されるタイミングと消えるタイミングを制御できます。これらのプロパティは、click、focus、keypress などのイベント名を値として受け入れ、さまざまなシナリオで IgrTooltip をトリガーできるようにします。
追加のプロパティ
これまでに説明したプロパティの他に、IgrTooltip コンポーネントには、動作、位置、外観をさらに構成できるさまざまな追加プロパティが用意されています。
| 名前 | タイプ | 説明 |
|---|---|---|
open |
boolean | ツールチップの表示/非表示を決定します。 |
disableArrow |
boolean | true に設定すると、ツールチップの矢印インジケーターが無効になります。 |
offset |
number | ツールチップとその anchor 間のピクセル距離を設定します。 |
メソッド
構成可能なプロパティに加えて、IgrTooltip では次の 3 つのメソッドも使用できます。
| 名前 | 説明 |
|---|---|
show |
ツールチップが表示されていない場合は表示します。ターゲットが指定されている場合は、ターゲットを一時的な anchor として設定します。 |
hide |
ツールチップがまだ非表示になっていない場合は非表示にします。 |
toggle |
ツールチップの表示状態と非表示状態を切り替えます。 |
アクセシビリティと ARIA サポート
IgrTooltip はアクセシビリティを考慮して構築されており、次の ARIA 属性が含まれています。
role- ツールチップがデフォルトの動作になっている場合、role="tooltip"が適用されます。stickyプロパティが有効な場合、ロールはstatusに変更されます。inert- 可視性に基づいて動的に切り替えられます。ツールチップが非表示になると、ツールチップは非アクティブになります。aria-atomic- true に設定すると、ツールチップのコンテンツ全体が変更時に通知されるようになります。aria-live- polite に設定して、ユーザーがアイドル状態のときにのみ更新を通知することをスクリーン リーダーに示します。
スタイル設定
IgrTooltip コンポーネントは、スタイル設定に使用できる 2 つの CSS パーツを公開します。
| 名前 | 説明 |
|---|---|
base |
ツールチップ コンポーネントの基本ラッパー。 |
bottom |
ツールチップ矢印を含む領域。 |
igc-tooltip::part(base) {
background-color: var(--ig-primary-500);
color: var(--ig-primary-500-contrast);
}
igc-tooltip::part(bottom) {
border-bottom-color: var(--ig-primary-500);
}