ツールチップを非表示にする迄のミリセカンドを取得または設定します。
// get
let tooltipHideDelay = this.tooltipTarget.hideDelay;
<!--set-->
<button type="button" igxButton [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>
ツールチップを表示する迄のミリセカンドを取得または設定します。
// get
let tooltipShowDelay = this.tooltipTarget.showDelay;
<!--set-->
<button type="button" igxButton [igxTooltipTarget]="tooltipRef" [showDelay]="1500">Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
ターゲットをマウスでホバーした時にツールチップを非表示にするかどうかを指定します。(デフォルトは False) このプロパティを 'true' に設定するとツールチップを表示/非表示にするユーザー インタラクションが無効になります。 ただし API を介してツールチップを表示/非表示にすることが可能です。
// get
let tooltipDisabledValue = this.tooltipTarget.tooltipDisabled;
<!--set-->
<button type="button" igxButton [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 type="button" igxButton [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 type="button" igxButton [igxTooltipTarget]="tooltipRef" (tooltipShow)='tooltipShowing($event)'>Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
Ignite UI for Angular Tooltip Target - ヘルプ
Ignite UI for Angular Tooltip Target ディレクティブは、ツールチップを持つ要素としてマークアップで HTML 要素をマークするために使用されます。 ツールチップ ターゲットは、エクスポートしたツールチップをターゲット セレクター プロパティに割り当てて Ignite UI for Angular Tooltip と組み合わせて使用します。
例: