Angular Tooltip (ツールチップ) ディレクティブの概要

igxTooltip と igxTooltipTarget ディレクティブは、完全なカスタマイズが可能なツールチップをサポートし、ページのあらゆる要素にアタッチできます。 ツールチップは、igxTooltipTargetディレクティブで使用できる場所の数が限られています。ターゲット (アンカー) と関連つけてページで任意の配置を指定でき、スクロールやカスタム アニメーションなどのその他のオーバーレイ設定をサポートします。

Angular Tooltip の例

Ignite UI for Angular Tooltip を使用した作業の開始

Ignite UI for Angular Tooltip ディレクティブを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxTooltipModule をインポートします。

// app.module.ts

...
import { IgxTooltipModule } from 'igniteui-angular';
// import { IgxTooltipModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [IgxTooltipModule],
})
export class AppModule {}

あるいは、16.0.0 以降、IgxTooltipDirective をスタンドアロンの依存関係としてインポートすることも、IGX_TOOLTIP_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

import { IGX_TOOLTIP_DIRECTIVES, IgxAvatarComponent } from 'igniteui-angular';
// import { IGX_TOOLTIP_DIRECTIVES, IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-avatar class="avatar" #target="tooltipTarget" [igxTooltipTarget]="tooltipRef"
                src="assets/images/avatar/10.jpg" size="medium" shape="circle">
    </igx-avatar>

    <div #tooltipRef="tooltip" igxTooltip>
        Her name is Madelyn James
    </div>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_TOOLTIP_DIRECTIVES, IgxAvatarComponent]
    /* or imports: [IgxTooltipDirective, IgxTooltipTargetDirective, IgxAvatarComponent] */
})
export class HomeComponent {}

Ignite UI for Angular Tooltip モジュールまたはディレクティブをインポートしたので、igxTooltip ディレクティブの使用を開始できます。

Angular Tooltip の使用

上記のようにシンプルなテキスト ツールチップを作成します。IgxAvatarModule をインポートして要素として IgxAvatar を使用します。

// app.module.ts

import { IgxTooltipModule, IgxAvatarModule } from 'igniteui-angular';
// import { IgxTooltipModule, IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [IgxTooltipModule, IgxAvatarModule],
})
export class AppModule {}

ツールチップ ターゲット

avatar をターゲットにして、igxTooltipTarget ディレクティブを設定し、ツールチップを持つ要素としてマークします。

• igxTooltipTarget ディレクティブは igxToggleAction ディレクティブを拡張します。
• igxTooltipTarget ディレクティブは、名前 tooltipTarget でエクスポートされます。

<!--simpleTooltip.component.html-->

<igx-avatar class="avatar" #target="tooltipTarget" igxTooltipTarget
            src="assets/images/avatar/10.jpg" size="medium" shape="circle">
</igx-avatar>

ツールチップ

ツールチップ要素を作成します。シンプルなテキスト ツールチップを作成するためテキストを含む標準 div 要素を定義し、ツールチップとしてマークされる igxTooltip ディレクティブを設定します。

• igxTooltip ディレクティブは igxToggle ディレクティブを拡張します。
• igxTooltip ディレクティブは、名前 tooltip でエクスポートされます。

<!--simpleTooltip.component.html-->

<div #tooltipRef="tooltip" igxTooltip>
    Her name is Madelyn James
</div>

ツールチップをターゲットにアタッチ

ここまででターゲットとツールチップを定義しました。ツールチップ参照を igxTooltipTarget セレクターに割り当てます。

<!--simpleTooltip.component.html-->

<igx-avatar class="avatar" #target="tooltipTarget" [igxTooltipTarget]="tooltipRef"
            src="assets/images/avatar/10.jpg" size="medium" shape="circle">
</igx-avatar>

<div #tooltipRef="tooltip" igxTooltip>
    Her name is Madelyn James
</div>

すべて適切に設定できると、Tooltip デモ セクションで示されるデモサンプルを確認することができます。

設定の表示/非表示

ツールチップを表示または非表示にするまでの時間を制御する場合は、igxTooltipTarget ディレクティブの showDelay と hideDelay プロパティを使用します。両プロパティは型 number でミリセカンドでタイムスパンを取得できます。

Note

ビルトイン UI インタラクションの動作と IgxTooltipTargetDirective および showDelay と hideDelay プロパティ値を考慮します。IgxTooltipDirective の API によるツールチップを表示および非表示は、showDelay and hideDelay プロパティ値を考慮しません。必要な場合、ロジックはアプリケーションの仕様を手動で実装する必要があります。

高機能なツールチップ

コンテンツのカスタマイズやスタイル設定が igxTooltip ディレクティブで簡単にできます。ツールチップはマークアップの標準要素であるため、必要な要素を追加してコンテンツを改善や状況に応じたスタイル設定が可能です。

igxTooltip を活用し、マップの特定の場所について詳細な情報を提供します。単純な div を使用してマップを表示し、ツールチップのロゴに IgxAvatar、マップの場所アイコンに IgxIcon を使用します。この目的のためには、各モジュールを取得する必要があります。

// app.module.ts

import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from 'igniteui-angular';
// import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [IgxTooltipModule, IgxAvatarModule, IgxIconModule],
})
export class AppModule {}

アプリケーションには以下のスタイルを使用します。

/* richTooltip.component.css */

.location:hover {
    cursor: pointer;
}

.map {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 252px;
    background-image: url(assets/images/card/media/infragisticsMap.png);
    border: 1px solid #D4D4D4;
}

.locationTooltip {
    width: 310px;
    background-color: var(--igx-grays-700);
    padding: 3px;
    font-size: 13px;
}

.locationTooltipContent {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    margin-right: 10px;
    min-width: 25px;
    width: 45px;
    height: 45px;
}

マップを作成しましょう。マップの背景画像がある単純な div を使用します。更に場所の位置を示すアイコンを追加します。場所の詳細を提供するためにアイコンがツールチップのターゲットになります。

<!--richTooltip.component.html-->

<div class="map">
    <igx-icon class="location" [style.color]="'blue'" fontSet="material"
    [igxTooltipTarget]="locationTooltip">location_on</igx-icon>
    ...
</div>

次にツールチップを作成します。コンテンツは、テキスト情報要素とアバターで構成されるコンテナーを作成します。ツールチップをターゲットにアタッチして CSS スタイルを使用します。

<!--richTooltip.component.html-->

<div class="wrapper">
    <div class="map">
        <igx-icon class="location" [style.color]="'blue'" fontSet="material"
        [igxTooltipTarget]="locationTooltip">location_on</igx-icon>

        <div class="locationTooltip" #locationTooltip="tooltip" igxTooltip>
            <div class="locationTooltipContent">
                <igx-avatar class="logo" src="assets/images/card/avatars/igLogo.png"
                    size="medium" shape="square"></igx-avatar>
                <div>
                    <div>Infragistics Inc. HQ</div>
                    <div>2 Commerce Dr, Cranbury, NJ 08512, USA</div>
                </div>
            </div>
        </div>
    </div>
</div>

上記をすべて完了すると場所とツールチップは以下のようになります。

オーバーレイ構成

igxTooltip および igxTooltipTarget ディレクティブは、IgxOverlayService を使用して各ツールチップ要素を開くか閉じるかします。

igxTooltipTarget ディレクティブは、overlaySettings プロパティ (igxToggleAction から継承します。) を公開し、ツールチップ アニメーション、UI 状の配置などのカスタマイズが可能です。プロパティを設定しない場合は、デフォルト オーバーレイ設定が使用されます。

Note

overlaySettings で設定したプロパティは、デフォルト オーバーレイ設定の同じプロパティをオーバーライドし、ツールチップに直接影響があります。

スタイル設定

ツールチップのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

最も簡単な方法は、tooltip-theme を拡張する新しいテーマを作成し、$text-color、$background、$border-radius パラメーターを受け取る方法です。

$dark-tooltip: tooltip-theme(
    $text-color: #ECAA53,
    $background: #011627,
    $border-radius: 6px
);

Note

ダイアログ ウィンドウのコンテンツの一部として使用される追加コンポーネント (IgxButton、IgxSwitch など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ツールチップのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。

ツールチップは IgxOverlayService を使用するため、スタイル設定するツールチップにカスタム テーマが適用されるよう、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。

<igx-avatar #target="tooltipTarget" [igxTooltipTarget]="tooltipRef"
            [igxToggleOutlet]="outlet">
</igx-avatar>

<div #outlet="overlay-outlet" igxOverlayOutlet>
    <div #tooltipRef="tooltip" igxTooltip>
        Her name is Madelyn James
    </div>
</div>

Note

IgxOverlayService を使用して表示される要素にテーマを提供するためのさまざまなオプションの詳細については、オーバーレイ スタイリングのトピックをご覧ください。

テーマを含む

最後にコンポーネントのテーマをアプリケーションに含めます。

$legacy-support が true に設定されている場合、コンポーネントのテーマを以下のように含めます。

 @include tooltip($dark-tooltip);

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

:host {
     ::ng-deep {
        @include tooltip($dark-tooltip);
    }
}

$legacy-support が false (デフォルト) に設定されている場合、css 変数 を以下のように含めます。

@include css-vars($dark-tooltip);

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合においても、変数をオーバーライドするにはグローバル セレクターが必要なため、:host を使用する必要があります。

:host {
    @include css-vars($dark-tooltip);
}

スタイル設定されたツールチップは以下のようになります。

デモ

ユーザー補助

igxTooltip ディレクティブを持つ要素には、自動生成された id プロパティ (開発者によって設定されていない場合)、ツールチップ role、およびツールチップが表示されているかどうかに応じて自動的に更新される aria-hidden 属性があります。ターゲットの aria-describedby 属性をそれぞれのツールチップの id に設定することにより、ツールチップ要素への参照が提供されます。エンドユーザーがツールチップへアクセスしたときにツールチップのコンテンツにアクセスするために必要な情報であるスクリーン リーダーを提供します。

以下の状況では十分な注意が必要です。

• ツールチップのコンテンツは非常に複雑なため自動翻訳できません。
• ツールチップは、ビルトインではなく手動で実装された動作とともに使用されます (手動による表示/非表示など)。
• ターゲット要素はフォーカスできません。

API リファレンス

このトピックでは、ページ要素にツールチップを作成する方法について学習しました。アプリケーションのデザインを改善するために、アイコンやアバターなどその他の Ignite UI for Angular コンポーネントも使用しました。各 API は以下の通りです。

• IgxTooltipDirective
• IgxTooltipTargetDirective

使用したその他のコンポーネントとディレクティブ:

• IgxAvatarComponent
• IgxIconComponent
• IgxToggleDirective
• IgxToggleActionDirective

スタイル:

• IgxTooltipDirective スタイル
• IgxAvatarComponent スタイル
• IgxIconComponent スタイル

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

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