Ignite UI for Angular Tooltip - Documentation

The Ignite UI for Angular Tooltip directive is used to mark an HTML element in the markup as one that should behave as a tooltip. The tooltip is used in combination with the Ignite UI for Angular Tooltip Target by assigning the exported tooltip reference to the respective 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"

IgxTooltipDirective

new IgxTooltipDirective(): IgxTooltipDirective

Returns IgxTooltipDirective

Properties

Section titled "Properties"

appended

Section titled "appended"

Inherited from: IgxToggleDirective

Emits an event after the toggle element is appended to the overlay container.

onAppended() {
 alert("Content appended!");
}
<div
  igxToggle
  (appended)='onToggleAppended()'>
</div>
appended: EventEmitter<ToggleViewEventArgs>

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

closed

Section titled "closed"

Inherited from: IgxToggleDirective

Emits an event after the toggle container is closed.

onToggleClosed(event) {
 alert("Toggle closed!");
}
<div
  igxToggle
  (closed)='onToggleClosed($event)'>
</div>
closed: EventEmitter<ToggleViewEventArgs>

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

closing

Section titled "closing"

Inherited from: IgxToggleDirective

Emits an event before the toggle container is closed.

onToggleClosing(event) {
 alert("Toggle closing!");
}
<div
 igxToggle
 (closing)='onToggleClosing($event)'>
</div>
closing: EventEmitter<ToggleViewCancelableEventArgs>

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

context

Section titled "context"

Gets/sets any tooltip related data. The 'context' can be used for storing any information that is necessary to access when working with the tooltip.

// get
let tooltipContext = this.tooltip.context;
// set
this.tooltip.context = "Tooltip's context";
context: any

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

id

Section titled "id"

Identifier for the tooltip. If this is property is not explicitly set, it will be automatically generated.

let tooltipId = this.tooltip.id;
id: string

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

opened

Section titled "opened"

Inherited from: IgxToggleDirective

Emits an event after the toggle container is opened.

onToggleOpened(event) {
   alert("Toggle opened!");
}
<div
  igxToggle
  (opened)='onToggleOpened($event)'>
</div>
opened: EventEmitter<ToggleViewEventArgs>

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

opening

Section titled "opening"

Inherited from: IgxToggleDirective

Emits an event before the toggle container is opened.

onToggleOpening(event) {
 alert("Toggle opening!");
}
<div
  igxToggle
  (opening)='onToggleOpening($event)'>
</div>
opening: EventEmitter<ToggleViewCancelableEventArgs>

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

role

Section titled "role" 
role: "tooltip" | "status"

Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts:87, projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.ts:90

Accessors

Section titled "Accessors"

arrow

Section titled "arrow"

Get the arrow element of the tooltip.

let tooltipArrow = this.tooltip.arrow;
get arrow(): HTMLElement

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

Returns HTMLElement

overlayId

Section titled "overlayId"

Inherited from: IgxToggleDirective

Returns the id of the overlay the content is rendered in.

this.myToggle.overlayId;
get overlayId(): string

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

Returns string

Methods

Section titled "Methods"

close

Section titled "close"

Inherited from: IgxToggleDirective

Closes the toggle.

this.myToggle.close();
close(event: Event): void

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

Parameters

  • event: Event

Returns void

open

Section titled "open"

Inherited from: IgxToggleDirective

Opens the toggle.

this.myToggle.open();
open(overlaySettings: OverlaySettings): void

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

Parameters

Returns void

reposition

Section titled "reposition"

Inherited from: IgxToggleDirective

Repositions the toggle.

this.myToggle.reposition();
reposition(): void

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

Returns void

setOffset

Section titled "setOffset"

Inherited from: IgxToggleDirective

Offsets the content along the corresponding axis by the provided amount with optional offsetMode that determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set

setOffset(deltaX: number, deltaY: number, offsetMode: OffsetMode): void

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

Parameters

  • deltaX: number
  • deltaY: number
  • offsetMode: OffsetMode

Returns void

toggle

Section titled "toggle"

Inherited from: IgxToggleDirective

Opens or closes the toggle, depending on its current state.

this.myToggle.toggle();
toggle(overlaySettings: OverlaySettings): void

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

Parameters

Returns void