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 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
(onClosing)='onToggleClosing($event)'>
</div>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>Get the role attribute of the tooltip.
let tooltipRole = this.tooltip.role;Closes the toggle.
this.myToggle.close();Opens the toggle.
this.myToggle.open();Repositions the toggle.
this.myToggle.reposition();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:
<button [igxTooltipTarget]="tooltipRef">Hover me</button> <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>