Tooltip Specification

1. Overview

The igxTooltipTarget and the igxTooltip directives provide us with a way to display a tooltip for a specific element.

<button [igxTooltipTarget]="tooltipRef">Hover me</button>

<span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>

As a developer, I want to:

be able to display a tooltip for a specific element when hovered with the mouse or focused with the Tab key.
be able to hide the tooltip of a specific element when no longer hovering it with the mouse.
be able to manually show the a tooltip for a specific element without interacting with the mouse (for example hovering the element).
be able to manually hide the tooltip of a specific element without interacting with the mouse.
be able to specify the delay time of a tooltip before it gets shown.
be able to specify the delay time of a tooltip before it gets hidden.
be able to specify the position at which the tooltip should be displayed.
be able to specify if the tooltip should automatically open on hover of the element.
be able to specify if the tooltip should automatically close when no longer hovering the element.
be able to use a default template for the content of the tooltip with the ability to style it.
be able to provide a custom template for the content of the tooltip.
be able to enable/disable the tooltip from showing.

As an end user, I want to:

be able to display a tooltip for an element when hovering with the mouse or focusing with the Tab key.
be able to hide the tooltip of an element when no longer hovering it with the mouse.
be able to interact with the content of the tooltip.

Name	Type	Description
showDelay	number	Specifies the amount of milliseconds that should pass before showing the tooltip.
hideDelay	number	Specifies the amount of milliseconds that should pass before hiding the tooltip.
tooltipDisabled	boolean	Specifies if the tooltip should not show when hovering its target with the mouse. (defaults to false)
tooltipHidden	boolean	Indicates if the tooltip is currently hidden.
nativeElement	any	Reference to the native element of the directive.

Name	Type	Arguments	Description
openTooltip	void	N/A	Opens the tooltip after the specified amount of ms by the `showDelay` property.
closeTooltip	void	N/A	Closes the tooltip after the specified amount of ms by the `hideDelay` property.

Name	Description	Cancelable	Event arguments
onTooltipOpening	Emitted when the tooltip starts opening. (This event is fired before the start of the countdown to showing the tooltip.)	True	ITooltipOpeningEventArgs
onTooltipOpened	Emitted when the tooltip is opened.	False	ITooltipOpenedEventArgs
onTooltipClosing	Emitted when the tooltip starts closing. (This event is fired before the start of the countdown to hiding the tooltip.)	True	ITooltipClosingEventArgs
onTooltipClosed	Emitted when the tooltip is closed.	False	ITooltipClosedEventArgs

The values of the igxTooltipTargetDirective inputs can be changed.
The tooltip is initially hidden.
The tooltip is opened when hovering its target and is hidden when unhovering its target.
The default position of the tooltip is bottom-center in relation to its target.
The tooltip is not opened when it is disabled and hovering its target.
The mouseenter and mouseleave interactions respect the showDelay and the hideDelay values.
The tooltip is opened when opening it through the API and is hidden when closing it through the API.
The opening and closing methods from the API respect the showDelay and the hideDelay values.
The tooltip closes and reopens if it was opened through API and then its target is hovered.
The tooltip closes and reopens if opening it through API multiple times.
The tooltip respects the passed overlay settings
The tooltip emits onOpening, onOpened, onClosing, onClosed events accordingly.
The tooltip emits onOpening, onOpened, onClosing, onClosed events with the correct event arguments.