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>
Determines where the toggle element overlay should be attached.
<!--set-->
<div igxToggleAction [igxToggleOutlet]="outlet"></div>
Where outlet in an instance of IgxOverlayOutletDirective or an ElementRef
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>
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>
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>
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>
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>
Gets the respective native element of the directive.
let tooltipTargetElement = this.tooltipTarget.nativeElement;
Indicates if the tooltip that is is associated with this target is currently hidden.
let tooltipHiddenValue = this.tooltipTarget.tooltipHidden;
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: