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>
Allows full control over the appearance of the close button inside the tooltip.
// get
let customCloseTemplate = this.tooltip.customCloseTemplate;
// set
this.tooltip.customCloseTemplate = TemplateRef<any>;
<!--set-->
<igx-icon igxTooltipTarget [closeButtonTemplate]="customClose" [tooltip]="'Infragistics Inc. HQ'">info</igx-icon>
<ng-template #customClose>
<button class="my-close-btn">Close Me</button>
</ng-template>
Controls whether to display an arrow indicator for the tooltip.
Set to true to show the arrow. Default value is false.
// get
let isArrowDisabled = this.tooltip.hasArrow;
// set
this.tooltip.hasArrow = true;
<!--set-->
<igx-icon igxTooltipTarget [hasArrow]="true" [tooltip]="'Infragistics Inc. HQ'">info</igx-icon>
Gets the respective native element of the directive.
let tooltipTargetElement = this.tooltipTarget.nativeElement;
Get the position and animation settings used by the tooltip.
let positionSettings = this.tooltipTarget.positionSettings;
Set the position and animation settings used by the tooltip.
<igx-icon [igxTooltipTarget]="tooltipRef" [positionSettings]="newPositionSettings">info</igx-icon>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
import { PositionSettings, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular';
...
public newPositionSettings: PositionSettings = {
horizontalDirection: HorizontalAlignment.Right,
horizontalStartPoint: HorizontalAlignment.Left,
verticalDirection: VerticalAlignment.Top,
verticalStartPoint: VerticalAlignment.Top,
};
Specifies if the tooltip remains visible until the user closes it via the close button or Esc key.
// get
let isSticky = this.tooltip.sticky;
// set
this.tooltip.sticky = true;
<!--set-->
<igx-icon igxTooltipTarget [sticky]="true" [tooltip]="'Infragistics Inc. HQ'">info</igx-icon>
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: