Tooltip Specification
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.
Since the IgxTooltip directive extends the IgxToggle directive and there is no specific functionality it adds apart from some styling classes and attributes, you can refer to the IgxToggle README for additional details.
| 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.
- The onOpening and the onClosing events can be successfully cancelled.
- The tooltip closes when pressing the 'Escape' key.
- Test the behavior of the tooltip with various overlaySettings.
Currently in order to set a simple text tooltip to an element, rather than setting a single input property for example, the developer has to create an additional DOM element that contains the tooltip text and mark the DOM element as an IgxTooltip.
