Tooltip Specification

1. Overview

The IgxTooltipDirective provides a way to display a tooltip for a specific element.

Tooltip with a simple text

<div igxTooltip="A worldwide leader in providing solutions to accelerate design, development, and collaboration.">
    Infragistics
</div>

Tooltip with a template

<div igxTooltip>
    Infragistics
    <ng-template igxTooltipTemplate>
        <img src="logo.png" />
        <span>
            Infragistics is a worldwide leader in providing solutions to accelerate design, development, and collaboration.
        </span>
    </ng-template>
</div>

2. User Stories

As a developer, I want to:

be able to display a tooltip for a specific element when hovering it with the mouse.
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 it with the mouse.
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.

3. API

Properties

Name	Type	Description
text	string	The text that is displayed inside the default template of the tooltip.
textCssClass	string	Determines the CSS class of the text that is displayed inside the default template of the tooltip. This allows the developer to provide custom CSS to customize the default tooltip.
tooltipTemplate	IgxTooltipTemplateDirective	Used to define a custom template for the tooltip. (If both `text` and `tooltipTemplate` are set, the `text` will be ignored and the `tooltipTemplate` will be used.)
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.
position	TooltipPosition	Specifies the position of the tooltip in relation to the element it is used for.
enabled	boolean	Specifies if the tooltip should show/hide based on user interaction - mouse hover/leave. (defaults to true)
shown	boolean	Indicates if the tooltip is currently shown.

Methods

Name	Type	Arguments	Description
show	void	N/A	Shows the tooltip after the specified amount of ms by the `showDelay` property.
hide	void	N/A	Hides the tooltip after the specified amount of ms by the `hideDelay` property.
toggle	void	N/A	Shows/Hides the tooltip after the specified amount of ms by the `hideDelay` property.