Web Components Tooltip (ツールチップ)

Ignite UI for Web Components Tooltip コンポーネントは、特定の要素のツールチップを表示する方法を提供します。ツールチップは、通常、要素がキーボード フォーカスを受け取ったとき、またはマウスを要素の上に置いたときに、要素に関連する情報を表示するポップアップです。

Ignite UI for Web Components Tooltip の例

作業の開始

Tooltip の使用を開始するには、最初に次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。

npm install igniteui-webcomponents

次に、以下のように、Tooltip とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { defineComponents, IgcTooltipComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcTooltipComponent);

Ignite UI for Web Components の完全な概要については、「作業の開始」トピックを参照してください。

これで、Web Components Tooltip の基本構成から始めることができます。

<igc-tooltip anchor="hover-button">
  Congrats you've hovered the button!
</igc-tooltip>

<igc-button id="hover-button">Hover me</igc-button>

使用方法

ツールチップ ターゲット

目的の要素にツールチップを添付するには、Tooltip の Anchor プロパティを使用し、それをターゲット要素の ID に設定します。

<igc-button id="target-button">Hover me</igc-button>
<igc-tooltip anchor="target-button">
  Congrats you've hovered the button!
</igc-tooltip>

要素インスタンスを直接渡すことでターゲットを指定することもできます。

<igc-tooltip id="tooltip">
  Congrats you've hovered the button!
</igc-tooltip>
<igc-button id="hover-button">Hover me</igc-button>

constructor() {
  const anchor = document.querySelector('#hover-button') as IgcButtonComponent;
  const tooltip = document.querySelector('#tooltip') as IgcTooltipComponent;
  tooltip.anchor = anchor;
}

ツールチップのコンテンツ

ツールチップのコンテンツは、Tooltip の開始タグと終了タグの間にカスタム コンテンツを配置することによって定義されます。

<igc-tooltip>
  This is my custom content here.
</igc-tooltip>

あるいは、単純なテキストを設定するには、Message プロパティを使用できます。

<igc-tooltip message="This is my custom content here."></igc-tooltip>

両方の方法 (スロット化されたコンテンツと Message プロパティ) を使用する場合、スロット化されたコンテンツが優先され、Message 値は無視されます。

<igc-button id="target-button">Hover me</igc-button>
<igc-tooltip anchor="target-button" message="I will be hidden.">
  I will be shown!
</igc-tooltip>

この例では、スロット化されたコンテンツ「I will be shown!」が Message プロパティ値の代わりに表示されます。

Tooltip のコンテンツは単なるテキスト以上のものになります。ツールチップはマークアップ内の通常の要素であるため、必要な要素を追加し、それに応じてスタイルを設定することで、そのコンテンツを強化できます。

設定の表示/非表示

Tooltip を表示および非表示にする前の遅延を制御する場合は、ShowDelay プロパティと HideDelay プロパティを使用できます。どちらのプロパティも、時間をミリ秒単位で表す数値を受け入れます。

<igc-tooltip show-delay="600" hide-delay="800">
  Her name is Madelyn James.
</igc-tooltip>

配置

Tooltip は、ターゲット要素を基準にして簡単に配置することもできます。必要なのは、Placement プロパティと PopoverPlacement のいずれかの配置オプションとともに使用するだけです。

Placement プロパティが設定されていない場合、デフォルト値は Bottom となり、Tooltip はターゲット要素の下に配置されます。

さらに、Sticky プロパティを使用して Tooltip を固定することができます。これにより、閉じるボタンが追加され、ユーザーが閉じるボタンをクリックするか、Esc キーを押して手動で閉じるまで、Tooltip が表示されたままになります。この動作はデフォルトのホバー動作をオーバーライドし、ユーザーがターゲット要素上でホバーを停止したときに Tooltip が消えないようにします。

Tooltip には、WithArrow プロパティを介して構成できるオプションの矢印インジケータも含まれています。矢印はツールチップをその anchor 要素に視覚的に接続し、その配置はツールチップの Placement に基づいて自動的に調整されます。

<igc-button id="target-button">Hover me</igc-button>
<igc-tooltip anchor="target-button" placement="top-start" sticky with-arrow>
  Congrats you've hovered the button!
</igc-tooltip>

次の例では、すべてのツールチップの配置オプション、矢印の配置動作、および Sticky プロパティの動作のデモを見ることができます。

トリガー

デフォルトでは、Tooltip はターゲット要素の上にマウスを移動したときにのみトリガーされます。ただし、ShowTriggers プロパティと HideTriggers プロパティを使用してこの動作を変更し、Tooltip が表示されるタイミングと消えるタイミングを制御できます。これらのプロパティは、click、focus、keypress などのイベント名を値として受け入れ、さまざまなシナリオで Tooltip をトリガーできるようにします。

高度な例

Tooltip は他のコンポーネントとシームレスに統合され、内部にコンポーネントを含む高度なツールチップを作成できます。 次の例では、List、Avatar、Icon、Badge、Button、Card、および CategoryChart コンポーネントを使用して説明的なツールチップを作成する方法を示しています。

追加のプロパティ

これまでに説明したプロパティの他に、Tooltip コンポーネントには、動作、配置、外観をさらに構成できるさまざまな追加プロパティが用意されています。

メソッド

構成可能なプロパティに加えて、Tooltip では次の 3 つのメソッドも使用できます。

アクセシビリティと ARIA サポート

Tooltip はアクセシビリティを考慮して構築されており、次の ARIA 属性が含まれています。

• role - ツールチップがデフォルトの動作になっている場合、role="tooltip" が適用されます。Sticky プロパティが有効な場合、ロールは status に変更されます。
• inert - 可視性に基づいて動的に切り替えられます。ツールチップが非表示になると、ツールチップは非アクティブになります。
• aria-atomic - true に設定すると、ツールチップのコンテンツ全体が変更時に通知されるようになります。
• aria-live - polite に設定して、ユーザーがアイドル状態のときにのみ更新を通知することをスクリーン リーダーに示します。

スタイル設定

Tooltip コンポーネントは、スタイル設定に使用できる 2 つの CSS パーツを公開します。

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);
}

API リファレンス

その他のリソース

• Ignite UI for Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)