Blazor Tooltip (ツールチップ)
Ignite UI for Blazor Tooltip コンポーネントは、特定の要素のツールチップを表示する方法を提供します。ツールチップは、通常、要素がキーボード フォーカスを受け取ったとき、またはマウスを要素の上に置いたときに、要素に関連する情報を表示するポップアップです。
Ignite UI for Blazor Tooltip の例
作業の開始
IgbTooltip を使用する前に、次のように登録する必要があります:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbTooltipModule));
また、IgbTooltip コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、Blazor WebAssembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
Ignite UI for Blazor の完全な概要については、「作業の開始」トピックを参照してください。
これで、Blazor IgbTooltip の基本構成から始めることができます。
<IgbTooltip Anchor="hover-button">
Congrats you have hovered the button!
</IgbTooltip>
<IgbButton id="hover-button">Hover me</IgbButton>
使用方法
ツールチップ ターゲット
目的の要素にツールチップを添付するには、IgbTooltip の Anchor プロパティを使用し、それをターゲット要素の ID に設定します。
<IgbButton id="target-button">Hover me</IgbButton>
<IgbTooltip Anchor="target-button">
Congrats you have hovered the button!
</IgbTooltip>
ツールチップのコンテンツ
ツールチップのコンテンツは、IgbTooltip の開始タグと終了タグの間にカスタム コンテンツを配置することによって定義されます。
<IgbTooltip>
Congrats you have hovered the button!
</IgbTooltip>
IgbTooltip のコンテンツは単なるテキスト以上のものになります。ツールチップはマークアップ内の通常の要素であるため、必要な要素を追加し、それに応じてスタイルを設定することで、そのコンテンツを強化できます。
設定の表示/非表示
IgbTooltip を表示および非表示にする前の遅延を制御する場合は、ShowDelay プロパティと HideDelay プロパティを使用できます。どちらのプロパティも、時間をミリ秒単位で表す数値を受け入れます。
<IgbTooltip ShowDelay="600" HideDelay="800">
Her name is Madelyn James.
</IgbTooltip>
[!NOTE] Tooltip API メソッド (
Show、Hide、Toggle) では、ShowDelayプロパティとHideDelayプロパティが考慮されないことに注意することが重要です。呼び出されるとすぐに動作します。
配置
IgbTooltip は、ターゲット要素を基準にして簡単に配置することもできます。必要なのは、Placement プロパティと PopoverPlacement のいずれかの配置オプションとともに使用するだけです。
Placement プロパティが設定されていない場合、デフォルト値は Bottom となり、IgbTooltip はターゲット要素の下に配置されます。
さらに、Sticky プロパティを使用して IgbTooltip を固定することができます。これにより、閉じるボタンが追加され、ユーザーが閉じるボタンをクリックするか、Esc キーを押して手動で閉じるまで、IgbTooltip が表示されたままになります。この動作はデフォルトのホバー動作をオーバーライドし、ユーザーがターゲット要素上でホバーを停止したときに IgbTooltip が消えないようにします。
IgbTooltip には、WithArrow プロパティを介して構成できるオプションの矢印インジケータも含まれています。矢印はツールチップをその anchor 要素に視覚的に接続し、その配置はツールチップの Placement に基づいて自動的に調整されます。
<IgbButton id="target-button">Hover me</IgbButton>
<IgbTooltip Anchor="target-button" Placement="PopoverPlacement.TopStart" Sticky="true" DisableArrow="true">
Congrats you have hovered the button!
</IgbTooltip>
次の例では、すべてのツールチップの配置オプション、矢印の配置動作、および Sticky プロパティの動作のデモを見ることができます。
トリガー
デフォルトでは、IgbTooltip はターゲット要素の上にマウスを移動したときにのみトリガーされます。ただし、ShowTriggers プロパティと HideTriggers プロパティを使用してこの動作を変更し、IgbTooltip が表示されるタイミングと消えるタイミングを制御できます。これらのプロパティは、click、focus、keypress などのイベント名を値として受け入れ、さまざまなシナリオで IgbTooltip をトリガーできるようにします。
高度な例
IgbTooltip は他のコンポーネントとシームレスに統合され、内部にコンポーネントを含む高度なツールチップを作成できます。
次の例では、IgbList、IgbAvatar、IgbIcon、IgbBadge、IgbButton、IgbCard、および IgbCategoryChart コンポーネントを使用して説明的なツールチップを作成する方法を示しています。
追加のプロパティ
これまでに説明したプロパティの他に、IgbTooltip コンポーネントには、動作、配置、外観をさらに構成できるさまざまな追加プロパティが用意されています。
| 名前 | タイプ | 説明 |
|---|---|---|
Open |
boolean | ツールチップの表示/非表示を決定します。 |
WithArrow |
boolean | ツールチップの矢印インジケーターをレンダリングするかどうかを決定します。 |
Offset |
number | ツールチップとその Anchor 間のピクセル距離を設定します。 |
メソッド
構成可能なプロパティに加えて、IgbTooltip では次の 3 つのメソッドも使用できます。
| 名前 | 説明 |
|---|---|
Show |
ツールチップが表示されていない場合は表示します。ターゲットが指定されている場合は、ターゲットを一時的な Anchor として設定します。 |
Hide |
ツールチップがまだ非表示になっていない場合は非表示にします。 |
Toggle |
ツールチップの表示状態と非表示状態を切り替えます。 |
アクセシビリティと ARIA サポート
IgbTooltip はアクセシビリティを考慮して構築されており、次の ARIA 属性が含まれています。
role- ツールチップがデフォルトの動作になっている場合、role="tooltip"が適用されます。Stickyプロパティが有効な場合、ロールはstatusに変更されます。inert- 可視性に基づいて動的に切り替えられます。ツールチップが非表示になると、ツールチップは非アクティブになります。aria-atomic- true に設定すると、ツールチップのコンテンツ全体が変更時に通知されるようになります。aria-live- polite に設定して、ユーザーがアイドル状態のときにのみ更新を通知することをスクリーン リーダーに示します。
スタイル設定
IgbTooltip コンポーネントは、スタイル設定に使用できる 2 つの CSS パーツを公開します。
| 名前 | 説明 |
|---|---|
base |
ツールチップ コンポーネントの基本ラッパー。 |
top, right, bottom, left ... |
ツールチップ矢印を含む領域。パーツ名はツールチップ配置プロパティの値と一致します。 |
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 リファレンス
IgbTooltipIgbAvatarIgbButtonIgbIconIgbCardIgbInputIgbBadgeIgbListIgbCategoryChart- スタイル設定およびテーマ