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>

Constructors

Section titled "Constructors"

IgxTooltipTargetDirective 

new IgxTooltipTargetDirective(): IgxTooltipTargetDirective

Returns IgxTooltipTargetDirective

Properties

Section titled "Properties"

hideDelay

Section titled "hideDelay"

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

outlet

Section titled "outlet"

Inherited from: IgxToggleActionDirective

Determines where the toggle element overlay should be attached.

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

Where outlet is an instance of overlay outlet or a reference to the element.

 
outlet: IgxOverlayOutletDirective | ElementRef<any>

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

overlaySettings

Section titled "overlaySettings"

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

showDelay

Section titled "showDelay"

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

tooltipDisabled

Section titled "tooltipDisabled"

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

tooltipHide

Section titled "tooltipHide"

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

tooltipShow

Section titled "tooltipShow"

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

Accessors

Section titled "Accessors"

closeTemplate

Section titled "closeTemplate" 
get closeTemplate(): TemplateRef<any>

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

Returns TemplateRef<any>

Allows full control over the appearance of the close button inside the tooltip.

// 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>
set closeTemplate(value: TemplateRef<any>): void

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

Parameters

  • value: TemplateRef<any>

Returns void

hasArrow

Section titled "hasArrow"

Controls whether to display an arrow indicator for the tooltip. Set to true to show the arrow. Default value is 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>
set hasArrow(value: boolean): void

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

Parameters

  • value: boolean

Returns void

hideTriggers

Section titled "hideTriggers"

Which event triggers will hide the tooltip. Expects a comma-separated string of different event triggers. Defaults to pointerleave and click.

<igx-icon [igxTooltipTarget]="tooltipRef" [hideTriggers]="'keypress,blur'">info</igx-icon>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
get hideTriggers(): string

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

Returns string 

set hideTriggers(value: string): void

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

Parameters

  • value: string

Returns void

nativeElement

Section titled "nativeElement"

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

positionSettings

Section titled "positionSettings"

Get the position and animation settings used by the tooltip.

let positionSettings = this.tooltipTarget.positionSettings;
get positionSettings(): PositionSettings

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

Returns PositionSettings

Set the position and animation settings used by the tooltip.

<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,
};
set positionSettings(settings: PositionSettings): void

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

Parameters

Returns void

showTriggers

Section titled "showTriggers"

Which event triggers will show the tooltip. Expects a comma-separated string of different event triggers. Defaults to pointerenter.

<igx-icon [igxTooltipTarget]="tooltipRef" [showTriggers]="'click,focus'">info</igx-icon>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
get showTriggers(): string

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

Returns string 

set showTriggers(value: string): void

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

Parameters

  • value: string

Returns void

sticky

Section titled "sticky"

Specifies if the tooltip remains visible until the user closes it via the close button or Esc key.

// get
let isSticky = this.tooltip.sticky;
// set
this.tooltip.sticky = true;
<!--set-->
<igx-icon igxTooltipTarget [sticky]="true" [tooltip]="'Infragistics Inc. HQ'">info</igx-icon>
set sticky(value: boolean): void

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

Parameters

  • value: boolean

Returns void

tooltip

Section titled "tooltip"

Specifies a plain text as tooltip content.

<igx-icon igxTooltipTarget [tooltip]="'Infragistics Inc. HQ'">info</igx-icon>
set tooltip(content: any): void

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

Parameters

  • content: any

Returns void

tooltipHidden

Section titled "tooltipHidden"

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

Methods

Section titled "Methods"

hideTooltip

Section titled "hideTooltip"

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

showTooltip

Section titled "showTooltip"

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