测试,请勿使用
The tooltip is a pop-up tip that appears when you hover over an item or click on it.
🔬️ Help make Tooltips better by answering a few questions.
Demo
Installation
Install the npm package.
npm i ng2-tooltip-directive
Import Ng2Module
:
;
Usage
Options can be set in the directive tag, so they have the highest priority.
Tooltip on top
You may pass as an object:
Tooltip on left
myOptions =;
You can pass HTML as content :
Tooltip with HTML content
Hello i'm a bold text! Tooltip with template content
Set default values
Create a file with your settings, for example:
; ;
And pass your parameters when importing the module:
;;
Properties
name | type | default | description |
---|---|---|---|
placement | "top", "bottom", "left", "right" | "top" | The position of the tooltip. |
autoPlacement | boolean | true | Place the tooltip so that it does not go beyond the borders of the browser window. |
show-delay | number | 0 | The delay in ms before showing the tooltip. |
hide-delay | number | 300 | The delay in ms before removing the tooltip. |
hideDelayTouchscreen | number | 0 | Delay in milliseconds before hiding the tooltip (for mobile devices). |
display | boolean | true | Tooltip availability for display. |
displayTouchscreen | boolean | true | Display the tooltip on mobile devices. |
z-index | number | 0 | Z-index of the tooltip. |
trigger | "hover", "click" | "hover" | Specifies how the tooltip is triggered. Control the closing time with "hide-delay". |
tooltip-class | string | Classes to be passed to the tooltip. | |
animation-duration | number | 300 | The duration controls how long the animation takes to run from start to finish. |
theme | "dark", "light" | "dark" | Theme of tooltip background and text. |
shadow | boolean | true | Shadow of the tooltip. |
offset | number | 8 | Offset the tooltip relative to the item. |
width | number | undefined | Width of the tooltip. |
max-width | number | 200 | Maximum width of the tooltip. |
content-type | "string", "html', "template" | "string" | The content type passed to the tooltip. |
hideDelayAfterClick | number | 2000 | Tooltip hiding delay for "click" trigger. |
pointerEvents | "auto", "none" | "none" | Defines whether or not an element reacts to pointer events. |
position | {top: number, left: number} | undefined | The tooltip coordinates relative to the browser window. |
Events
When you call events, the delays that are specified in the options in the directive are taken into account. Default delay before tooltip hiding is 300 milliseconds.
Event | Description |
---|---|
{type: "show", position: DOMRect} | The event is called before the tooltip appears. |
{type: "shown", position: DOMRect} | The event is called after the animation of the appearance of the tooltip. |
{type: "hide", position: DOMRect} | The event is called before the tooltip is hidden. |
{type: "hidden", position: DOMRect} | The event is called after the animation of the tooltip is hidden. |
Methods
If you specified the directive options, they will be taken into account when calling methods. Including the delay before the appearance and hiding of the tooltip.
Method | Description |
---|---|
show() | Shows the tooltip |
hide() | Hides the tooltip |
Sponsors
We use Browserstack for cross-browser testing.