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:
<button type="button" igxButton [igxTooltipTarget]="tooltipRef">Hover me</button>
<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span> Constructors
Section titled "Constructors"IgxTooltipTargetDirective
new IgxTooltipTargetDirective(): IgxTooltipTargetDirective Returns IgxTooltipTargetDirective
Properties
Section titled "Properties"hideDelay
Section titled "hideDelay"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> hideDelay: number = 300 Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:82
outlet
Section titled "outlet"Inherited from: IgxToggleActionDirective
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
outlet: IgxOverlayOutletDirective | ElementRef<any> Defined in projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:453
overlaySettings
Section titled "overlaySettings"Inherited from: IgxToggleActionDirective
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> overlaySettings: OverlaySettings Defined in projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:437
showDelay
Section titled "showDelay"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> showDelay: number = 200 Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:65
tooltipDisabled
Section titled "tooltipDisabled"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> tooltipDisabled: boolean = false Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:233
tooltipHide
Section titled "tooltipHide"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> tooltipHide: EventEmitter<ITooltipHideEventArgs> Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:367
tooltipShow
Section titled "tooltipShow"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> tooltipShow: EventEmitter<ITooltipShowEventArgs> Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:349
closeTemplate
Section titled "closeTemplate"closeTemplate: TemplateRef<any> Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:171, projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:176
hasArrow
Section titled "hasArrow"hasArrow: boolean Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:104, projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:111
hideTriggers
Section titled "hideTriggers"hideTriggers: string Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:265, projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:269
positionSettings
Section titled "positionSettings"positionSettings: PositionSettings Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:187, projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:209
showTriggers
Section titled "showTriggers"showTriggers: string Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:245, projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:249
sticky
Section titled "sticky"sticky: boolean Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:134, projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:144
Accessors
Section titled "Accessors"nativeElement
Section titled "nativeElement"Gets the respective native element of the directive.
let tooltipTargetElement = this.tooltipTarget.nativeElement;get nativeElement(): any Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:318
Returns any
tooltipHidden
Section titled "tooltipHidden"Indicates if the tooltip that is is associated with this target is currently hidden.
let tooltipHiddenValue = this.tooltipTarget.tooltipHidden;get tooltipHidden(): boolean Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:329
Returns boolean
Methods
Section titled "Methods"hideTooltip
Section titled "hideTooltip"Hides the tooltip if not already hidden.
this.tooltipTarget.hideTooltip();hideTooltip(): void Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:490
Returns void
showTooltip
Section titled "showTooltip"Shows the tooltip if not already shown.
this.tooltipTarget.showTooltip();showTooltip(): void Defined in projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts:479