ツールチップ

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

デモ


設定

Ignite UI for Angular ツールチップ、ヒント および ツールチップ、ヒントターゲットを初期化する前に、app.module.ts ファイルにIgxTooltipModule をインポートします。

// app.module.ts

...
import {
    IgxTooltipModule
} from 'igniteui-angular';

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

シンプルなツールチップ

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

// app.module.ts

...
import {
    IgxTooltipModule,
    IgxAvatarModule
} from 'igniteui-angular';

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

更に要素にカスタム スタイルを定義します。

/* simpleTooltip.component.css */

.wrapper {
    text-align: center;
    margin: 20px;
}

.avatar {
    display: inline-block;
}

.bottomMargin {
    margin-bottom: 50px;
}

ツールチップ ターゲット

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

  • igxTooltipTarget ディレクティブは [igxToggleAction] ディレクティブを拡張します。
  • igxTooltipTarget ディレクティブは、名前 tooltipTarget でエクスポートされます。
<!--simpleTooltip.component.html-->

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

ツールチップ

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

  • igxTooltip ディレクティブは [igxToggle] ディレクティブを拡張します。
  • igxTooltip ディレクティブは、名前 tooltip でエクスポートされます。
<!--simpleTooltip.component.html-->

<div #tooltipRef="tooltip" igxTooltip>
    Her name is Toola Tipa
</div>

ツールチップをターゲットにアタッチします。

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

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

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

<div #tooltipRef="tooltip" igxTooltip>
    Her name is Toola Tipa
</div>

設定の表示/非表示

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

次に IgxSlider 要素をいくつか showDelayhideDelay に追加します。更にターゲットの tooltipDisabled プロパティを使用してツールチップ ターゲットでユーザー インタラクションを有効/無効にする IgxSwitch を使用します。

IgxSliderModule と [IgxSwitchModule] を取得します。

// app.module.ts

...
import {
    IgxTooltipModule,
    IgxAvatarModule,
    IgxSliderModule,
    IgxSwitchModule
} from 'igniteui-angular';

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

Slider と Switch コントロールをコンポーネントのテンプレートに定義できます。showDelayhideDelay プロパティを ngModels としてそれぞれ 2 つのスライダーにバインドし、同様に tooltipDisabled を Switch コントロールにバインドします。

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

...
<div>
    <div class="bottomMargin">
        <igx-switch [(ngModel)]="target.tooltipDisabled">Disable tooltip</igx-switch>
    </div>
    <div class="bottomMargin">
        <span>Show Delay: {{target.showDelay}} ms</span>
        <igx-slider minValue="0" maxValue="3000" [step]="100" [(ngModel)]="target.showDelay"></igx-slider>                
    </div>
    <div>
        <span>Hide Delay: {{target.hideDelay}} ms</span>
        <igx-slider minValue="0" maxValue="3000" [step]="100" [(ngModel)]="target.hideDelay"></igx-slider>                
    </div>
</div>

このトピックのはじめにあるコードの結果は「ツールチップ、ヒント表示デモ」で確認できます。

Note

ビルトイン UI インタラクションの動作と IgxTooltipTargetDirective](https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxtooltiptargetdirective.html) および showDelayhideDelay プロパティ値を考慮します。IgxTooltipDirective の API によるツールチップを表示および非表示は、showDelay and hideDelay プロパティ値を考慮しません。必要な場合、ロジックはアプリケーションの仕様を手動で実装する必要があります。

高機能なツールチップ

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

igxTooltip の使用を拡張し、マップの特定の場所について詳細な情報を提供します。アプリケーションの UI を更にきれいにするためにIgxCardを使用してマップを表示し、ツールチップのロゴに IgxAvatar、マップの場所アイコンにIgxIcon、カード動作にIgxButton を使用します。これには各モジュールを取得する必要があります。

// app.module.ts

...
import {
    IgxTooltipModule,
    IgxCardModule,
    IgxAvatarModule,
    IgxIconModule,
    IgxButtonModule
} from 'igniteui-angular';

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

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

/* richTooltip.component.css */

.wrapper { 
    margin: 20px;
}

.cursorHover:hover {
    cursor: pointer;
}

.card-wrapper {
    max-width: 200px;
    min-width: 120px;
}

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

.locationTooltip {
    width: 310px;
    background-color: rgba(128, 128, 128, 0.7);
    padding: 3px;
    font-size: 13px;
}

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

.locationIcon {
    width: 45px;
    height: 45px;
}

カードを作成してコンテンツをマップの背景画像のある要素にすることから始めます。更に場所の位置を示すアイコンを追加します。場所の詳細を提供するためにアイコンがツールチップのターゲットになります。

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

<igx-card>
    <igx-card-content style="padding: 0px;">
        <div class="location">
            <igx-icon class="cursorHover" color="blue" fontSet="material" igxTooltipTarget>location_on</igx-icon>
        </div>
    </igx-card-content>
</igx-card>

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

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

<igx-card>
    <igx-card-content style="padding: 0px;">
        <div class="location">
            <igx-icon class="cursorHover" color="blue" fontSet="material" [igxTooltipTarget]="locationTooltip">location_on</igx-icon>

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

最後にボタンアイコンをカード アクションとして追加します。

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

<igx-card>
    <igx-card-content style="padding: 0px;">
        ...
    </igx-card-content>
    <igx-card-actions>
        <div class="igx-card-actions__igroup--start">
            <span igxButton="icon">
                <igx-icon fontSet="material">favorite</igx-icon>
            </span>
            <span igxButton="icon">
                <igx-icon fontSet="material">share</igx-icon>
            </span>
        </div>
    </igx-card-actions>
</igx-card>

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


オーバーレイ構成

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

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

Note

overlaySettings](https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxtooltiptargetdirective.html#overlaysettings) で設定したプロパティは、デフォルト オーバーレイ設定の同じプロパティをオーバーライドし、ツールチップに直接影響があります。

ユーザー補助

igxTooltip ディレクティブの要素には、ツールチップの表示状態に基づいて自動的に更新、自動生成された (https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/classes/igxtooltipdirective.html#id) プロパティ (開発者が設定しない場合)、ツールチップ rolearia-hidden 属性が含まれます。ターゲットの aria-describedby 属性を各ツールチップのid に設定すると、参照がツールチップ要素に提供されます。エンドユーザーがツールチップへアクセスしたときにツールチップのコンテンツにアクセスするために必要な情報であるスクリーン リーダーを提供します。

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

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

API リファレンス

このトピックでは、ページ要素にツールチップを作成する方法について説明しました。また、アプリケーションのデザインには icons, avatars and cards などの Ignite UI for Angular コンポーネントも追加で使用しました。以下は、各 API です。

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

スタイル:

その他のリソース

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