Class IgxTooltipDirective

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 [igxTooltipTarget]="tooltipRef">Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>

Hierarchy

Implements

Properties

context

context: any

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";

id

id: string = `igx-tooltip-${NEXT_ID++}`

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

let tooltipId = this.tooltip.id;

onClosed

onClosed: EventEmitter<Object> = new EventEmitter()

Emits an event after the toggle container is closed.

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

onClosing

onClosing: EventEmitter<CancelableBrowserEventArgs> = new EventEmitter<CancelableBrowserEventArgs>()

Emits an event before the toggle container is closed.

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

onOpened

onOpened: EventEmitter<Object> = new EventEmitter()

Emits an event after the toggle container is opened.

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

onOpening

onOpening: EventEmitter<CancelableEventArgs> = new EventEmitter<CancelableEventArgs>()

Emits an event before the toggle container is opened.

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

Accessors

role

  • get role(): string

Methods

close

  • close(): void

open

reposition

  • reposition(): void

toggle