https://github.com/cloudfactorydk/ng2-tooltip-directive
The tooltip is a pop-up tip that appears when you hover over an item or click on it.
https://github.com/cloudfactorydk/ng2-tooltip-directive
Last synced: 6 months ago
JSON representation
The tooltip is a pop-up tip that appears when you hover over an item or click on it.
- Host: GitHub
- URL: https://github.com/cloudfactorydk/ng2-tooltip-directive
- Owner: cloudfactorydk
- License: mit
- Created: 2022-06-28T11:23:18.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-06-07T11:35:54.000Z (over 1 year ago)
- Last Synced: 2025-05-02T10:03:10.647Z (6 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@cloudfactorydk/ng2-tooltip-directive
- Size: 1.24 MB
- Stars: 5
- Watchers: 2
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ng2-tooltip-directive - Forked from <b><code> 99⭐</code></b> <b><code> 77🍴</code></b> [ng2-tooltip-directive](https://github.com/drozhzhin-n-e/ng2-tooltip-directive)). (Table of contents / Third Party Components)
- awesome-angular - ng2-tooltip-directive - Forked from [ng2-tooltip-directive](https://github.com/drozhzhin-n-e/ng2-tooltip-directive). (Table of contents / Third Party Components)
- fucking-awesome-angular - ng2-tooltip-directive - Forked from <b><code> 102⭐</code></b> <b><code> 76🍴</code></b> [ng2-tooltip-directive](https://github.com/drozhzhin-n-e/ng2-tooltip-directive)). (Table of contents / Third Party Components)
- fucking-awesome-angular - ng2-tooltip-directive - Forked from <b><code> 102⭐</code></b> <b><code> 76🍴</code></b> [ng2-tooltip-directive](https://github.com/drozhzhin-n-e/ng2-tooltip-directive)). (Table of contents / Third Party Components)
README
# Tooltip for Angular
### forked from drozhzhin-n-e/ng2-tooltip-directive
The tooltip is a pop-up tip that appears when you hover over an item or click on it.
## Installation
Install the npm package.
npm i @cloudfactorydk/ng2-tooltip-directive
Import `Ng2Module`:
```ts
import { TooltipModule } from '@cloudfactorydk/ng2-tooltip-directive';
@NgModule({
imports: [ TooltipModule ]
})
```
## Usage
Options can be set in the directive tag, so they have the highest priority.
```html
Tooltip on top
```
You may pass as an object:
```html
Tooltip on left
```
```ts
myOptions = {
'placement': 'left',
'showDelay': 500
}
```
You can pass HTML as content :
```html
Tooltip with HTML content
```
```html
Hello i'm a bold text!
Tooltip with template content
```
## Set default values
Create a file with your settings, for example:
```ts
import { TooltipOptions } from '@cloudfactorydk/ng2-tooltip-directive';
export const MyDefaultTooltipOptions: TooltipOptions = {
'show-delay': 500
}
```
And pass your parameters when importing the module:
```ts
import { TooltipModule, TooltipOptions } from '@cloudfactorydk/ng2-tooltip-directive';
import { MyDefaultTooltipOptions } from './my-default-options';
@NgModule({
imports: [
TooltipModule.forRoot(MyDefaultTooltipOptions as TooltipOptions)
]
})
```
## 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. |
| showDelay | number | 0 | The delay in ms before showing the tooltip. |
| hideDelay | 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. |
| zIndex | number | 0 | Z-index of the tooltip. |
| trigger | "hover", "click" | "hover" | Specifies how the tooltip is triggered. Control the closing time with "hide-delay". |
| tooltipClass | string | | Classes to be passed to the tooltip. |
| animationDuration | 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. |
| maxWidth | number | 200 | Maximum width of the tooltip. |
| contentType | "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 |