Class IgxTooltipTargetDirective

Ignite UI for Angular Tooltip Target - ヘルプ

Ignite UI for Angular Tooltip Target ディレクティブは、ツールチップを持つ要素としてマークアップで HTML 要素をマークするために使用されます。 ツールチップ ターゲットは、エクスポートしたツールチップをターゲット セレクター プロパティに割り当てて Ignite UI for Angular Tooltip と組み合わせて使用します。

例:

<button type="button" igxButton [igxTooltipTarget]="tooltipRef">Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>

階層

Hierarchy (view full)

実装

  • OnInit
  • OnDestroy

コンストラクター

プロパティ

hideDelay: number = 500

ツールチップを非表示にする迄のミリセカンドを取得または設定します。

// 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>
outlet: ElementRef<any> | IgxOverlayOutletDirective

トグル要素オーバーレイにアタッチする場所を決定します。

<!--set-->
<div igxToggleAction [igxToggleOutlet]="outlet"></div>

outletIgxOverlayOutletDirective のインスタンスまたは ElementRef

overlaySettings: OverlaySettings
showDelay: number = 500

ツールチップを表示する迄のミリセカンドを取得または設定します。

// 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>
tooltipDisabled: boolean = false

ターゲットをマウスでホバーした時にツールチップを非表示にするかどうかを指定します。(デフォルトは 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>
tooltipHide: EventEmitter<ITooltipHideEventArgs> = ...

このターゲットと関連するツールチップが非表示になるときにイベントを発生します。 このイベントは、ツールチップを非表示にするためにカウントダウン開始前に発生されます。

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>
tooltipShow: EventEmitter<ITooltipShowEventArgs> = ...

このターゲットと関連するツールチップが表示になるときにイベントを発生します。 このイベントは、ツールチップを表示にするためにカウントダウン開始前に発生されます。

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>

アクセサー

メソッド