クラス IgxTooltipTargetDirective

Ignite UI for Angular Tooltip Target - ヘルプ

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

例:

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

階層

実装

  • OnInit
  • OnInit
  • OnDestroy

コンストラクタ

constructor

プロパティ

hideDelay

hideDelay: number = 500

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

// 取得
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>

onTooltipHide

onTooltipHide: EventEmitter<ITooltipHideEventArgs> = new EventEmitter<ITooltipHideEventArgs>()

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

tooltipHiding(args: ITooltipHideEventArgs) {
   alert("Tooltip started hiding!");
}
<button [igxTooltipTarget]="tooltipRef"
        (onTooltipHide)='tooltipHiding($event)'>Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>

onTooltipShow

onTooltipShow: EventEmitter<ITooltipShowEventArgs> = new EventEmitter<ITooltipShowEventArgs>()

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

tooltipShowing(args: ITooltipShowEventArgs) {
   alert("Tooltip started showing!");
}
<button [igxTooltipTarget]="tooltipRef"
        (onTooltipShow)='tooltipShowing($event)'>Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>

outlet

outlet: IgxOverlayOutletDirective | ElementRef

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

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

outletIgxOverlayOutletDirective のインスタンスまたは ElementRef です。

overlaySettings

overlaySettings: OverlaySettings

トグルのオーバーレイ配置、操作、およびスクロール動作を制御する設定を提供します。

const settings: OverlaySettings = {
     closeOnOutsideClick: false,
     modal: false
 }

<!--set-->
<div igxToggleAction [overlaySettings]="settings"></div>

showDelay

showDelay: number = 500

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

// 取得
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>

tooltipDisabled

tooltipDisabled: boolean = false

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

アクセサー

nativeElement

  • get nativeElement(): any

tooltipHidden

  • get tooltipHidden(): boolean

メソッド

hideTooltip

  • hideTooltip(): void

showTooltip

  • showTooltip(): void