ツールチップを非表示にする迄のミリセカンドを取得または設定します。
// 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>
ツールチップ内の閉じるボタンの外観を完全に制御します。
// get
let customCloseTemplate = this.tooltip.customCloseTemplate;
// set
this.tooltip.customCloseTemplate = TemplateRef<any>;
<!--set-->
<igx-icon igxTooltipTarget [closeButtonTemplate]="customClose" [tooltip]="'Infragistics Inc. HQ'">info</igx-icon>
<ng-template #customClose>
<button class="my-close-btn">Close Me</button>
</ng-template>
ツールチップの矢印インジケーターを表示するかどうかを制御します。矢印を表示するには
true に設定します。す。デフォルト値は false です。
// get
let isArrowDisabled = this.tooltip.hasArrow;
// set
this.tooltip.hasArrow = true;
<!--set-->
<igx-icon igxTooltipTarget [hasArrow]="true" [tooltip]="'Infragistics Inc. HQ'">info</igx-icon>
ディレクティブの各ネイティブ要素を取得します。
let tooltipTargetElement = this.tooltipTarget.nativeElement;
ツールチップに使用される位置とアニメーション設定を取得します。
let positionSettings = this.tooltipTarget.positionSettings;
ツールチップに使用する位置とアニメーション設定を設定します。
<igx-icon [igxTooltipTarget]="tooltipRef" [positionSettings]="newPositionSettings">info</igx-icon>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
import { PositionSettings, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular';
...
public newPositionSettings: PositionSettings = {
horizontalDirection: HorizontalAlignment.Right,
horizontalStartPoint: HorizontalAlignment.Left,
verticalDirection: VerticalAlignment.Top,
verticalStartPoint: VerticalAlignment.Top,
};
ツールチップがユーザーによって [閉じる] ボタンまたは [Esc] キーで閉じられるまで表示され続けるかどうかを指定します。
// get
let isSticky = this.tooltip.sticky;
// set
this.tooltip.sticky = true;
<!--set-->
<igx-icon igxTooltipTarget [sticky]="true" [tooltip]="'Infragistics Inc. HQ'">info</igx-icon>
このターゲットに関連付けられたツールチップが現在非表示かどうかを示します。
let tooltipHiddenValue = this.tooltipTarget.tooltipHidden;
Ignite UI for Angular Tooltip Target - ヘルプ
Ignite UI for Angular Tooltip Target ディレクティブは、ツールチップを持つ要素としてマークアップで HTML 要素をマークするために使用されます。 ツールチップ ターゲットは、エクスポートしたツールチップをターゲット セレクター プロパティに割り当てて Ignite UI for Angular Tooltip と組み合わせて使用します。
例: