Ignite UI for Angular Tooltip Target - Documentation

The Ignite UI for Angular Tooltip Target directive is used to mark an HTML element in the markup as one that has a tooltip. The tooltip target is used in combination with the Ignite UI for Angular Tooltip by assigning the exported tooltip reference to the target's selector property.

Example:

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

IgxTooltipTargetDirective

new IgxTooltipTargetDirective(): IgxTooltipTargetDirective

Returns IgxTooltipTargetDirective

Gets/sets the amount of milliseconds that should pass before hiding the tooltip.

// 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>
hideDelay: number = 300

Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:82

Inherited from: IgxToggleActionDirective

Determines where the toggle element overlay should be attached.

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

Where outlet in an instance of IgxOverlayOutletDirective or an ElementRef

outlet: IgxOverlayOutletDirective | ElementRef<any>

Defined in projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:453

Inherited from: IgxToggleActionDirective

Provide settings that control the toggle overlay positioning, interaction and scroll behavior.

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

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

Defined in projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:437

Gets/sets the amount of milliseconds that should pass before showing the tooltip.

// 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>
showDelay: number = 200

Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:65

Specifies if the tooltip should not show when hovering its target with the mouse. (defaults to false) While setting this property to 'true' will disable the user interactions that shows/hides the tooltip, the developer will still be able to show/hide the tooltip through the 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>
tooltipDisabled: boolean = false

Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:233

Emits an event when the tooltip that is associated with this target starts hiding. This event is fired before the start of the countdown to hiding the tooltip.

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>
tooltipHide: EventEmitter<ITooltipHideEventArgs>

Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:367

Emits an event when the tooltip that is associated with this target starts showing. This event is fired before the start of the countdown to showing the tooltip.

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

Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:349

closeTemplate: TemplateRef<any>

Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:171, projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:176

hasArrow: boolean

Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:104, projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:111

hideTriggers: string

Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:265, projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:269

positionSettings: PositionSettings

Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:187, projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:209

showTriggers: string

Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:245, projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:249

sticky: boolean

Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:134, projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:144

Gets the respective native element of the directive.

let tooltipTargetElement = this.tooltipTarget.nativeElement;
get nativeElement(): any

Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:318

Returns any

Indicates if the tooltip that is is associated with this target is currently hidden.

let tooltipHiddenValue = this.tooltipTarget.tooltipHidden;
get tooltipHidden(): boolean

Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:329

Returns boolean

Hides the tooltip if not already hidden.

this.tooltipTarget.hideTooltip();
hideTooltip(): void

Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:490

Returns void

Shows the tooltip if not already shown.

this.tooltipTarget.showTooltip();
showTooltip(): void

Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:479

Returns void