Emits an event after the toggle element is appended to the overlay container.
onAppended() {
alert("Content appended!");
}
<div
igxToggle
(onAppended)='onToggleAppended()'>
</div>
Emits an event after the toggle container is closed.
onToggleClosed(event) {
alert("Toggle closed!");
}
<div
igxToggle
(onClosed)='onToggleClosed($event)'>
</div>
Emits an event before the toggle container is closed.
onToggleClosing(event) {
alert("Toggle closing!");
}
<div
igxToggle
(closing)='onToggleClosing($event)'>
</div>
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";
Identifier for the tooltip. If this is property is not explicitly set, it will be automatically generated.
let tooltipId = this.tooltip.id;
Emits an event after the toggle container is opened.
onToggleOpened(event) {
alert("Toggle opened!");
}
<div
igxToggle
(onOpened)='onToggleOpened($event)'>
</div>
Emits an event before the toggle container is opened.
onToggleOpening(event) {
alert("Toggle opening!");
}
<div
igxToggle
(onOpening)='onToggleOpening($event)'>
</div>
Returns the id of the overlay the content is rendered in.
this.myToggle.overlayId;
Get the role attribute of the tooltip.
let tooltipRole = this.tooltip.role;
Opens the toggle.
this.myToggle.open();
Opens or closes the toggle, depending on its current state.
this.myToggle.toggle();
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: