ツールチップを非表示にする迄のミリセカンドを取得または設定します。
// 取得
let tooltipHideDelay = this.tooltipTarget.hideDelay;
<!--set-->
<button [igxTooltipTarget]="tooltipRef" hideDelay="1500">Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
トグル要素オーバーレイにアタッチする場所を決定します。
<!--set-->
<div igxToggleAction [igxToggleOutlet]="outlet"></div>
outlet が IgxOverlayOutletDirective のインスタンスまたは ElementRef です。
トグルのオーバーレイ配置、操作、およびスクロール動作を制御する設定を提供します。
const settings: OverlaySettings = {
closeOnOutsideClick: false,
modal: false
}
<!--set-->
<div igxToggleAction [overlaySettings]="settings"></div>
ツールチップを表示する迄のミリセカンドを取得または設定します。
// 取得
let tooltipShowDelay = this.tooltipTarget.showDelay;
<!--set-->
<button [igxTooltipTarget]="tooltipRef" showDelay="1500">Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
ターゲットをマウスでホバーした時にツールチップを非表示にするかどうかを指定します。(デフォルトは False) このプロパティを 'true' に設定するとツールチップを表示/非表示にするユーザー インタラクションが無効になります。ただし API を介してツールチップを表示/非表示にすることが可能です。
// 取得
let tooltipDisabledValue = this.tooltipTarget.tooltipDisabled;
<!--set-->
<button [igxTooltipTarget]="tooltipRef" [tooltipDisabled]="true">Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
このターゲットと関連するツールチップが非表示になるときにイベントを発生します。 このイベントは、ツールチップを非表示にするためにカウントダウン開始前に発生されます。
tooltipHiding(args: ITooltipHideEventArgs) {
alert("Tooltip started hiding!");
}
<button [igxTooltipTarget]="tooltipRef"
(tooltipHide)='tooltipHiding($event)'>Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
このターゲットと関連するツールチップが表示になるときにイベントを発生します。 このイベントは、ツールチップを表示にするためにカウントダウン開始前に発生されます。
tooltipShowing(args: ITooltipShowEventArgs) {
alert("Tooltip started showing!");
}
<button [igxTooltipTarget]="tooltipRef"
(tooltipShow)='tooltipShowing($event)'>Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
ディレクティブの各ネイティブ要素を取得します。
let tooltipTargetElement = this.tooltipTarget.nativeElement;
このターゲットに関連付けられたツールチップが現在非表示かどうかを示します。
let tooltipHiddenValue = this.tooltipTarget.tooltipHidden;
'hideDelay' プロパティを優先してツールチップを非表示します。
this.tooltipTarget.hideTooltip();
'showDelay' プロパティを優先してツールチップを表示します。
this.tooltipTarget.showTooltip();
Ignite UI for Angular Tooltip Target - ヘルプ
Ignite UI for Angular Tooltip Target ディレクティブは、ツールチップを持つ要素としてマークアップで HTML 要素をマークするために使用されます。 ツールチップ ターゲットは、エクスポートしたツールチップをターゲット セレクター プロパティに割り当てて Ignite UI for Angular Tooltip と組み合わせて使用します。
例: