Note: I am not the author of this project, see their [official repository].(https://github.com/drozhzhin-n-e/ng2-tooltip-directive). The author doesn't seem to maintain its project anymore, so I'm just fixing stuff to update to new angular versions.

Tooltip for Angular

The tooltip is a pop-up tip that appears when you hover over an item or click on it.

Supported Angular versions

This version of the library support Angular version 15 and up.

Installation

Install the npm package.

npm i ng2-tooltip-directive-major-angular-updates

Import NgModule:

import { TooltipModule } from 'ng2-tooltip-directive-major-angular-updates';

@NgModule({
    imports: [ TooltipModule ]
})

Usage

Options can be set in the directive tag, so they have the highest priority.

<span tooltip="Tooltip" placement="top" showDelay="500">Tooltip on top</span>

You may pass as an object:

<span tooltip="Tooltip" [options]="myOptions">Tooltip on left</span>

myOptions = {
  placement: "left",
  showDelay: 500,
};

You can pass HTML as content :

<span tooltip="<p>Hello i'm a <strong>bold</strong> text!</p>"> Tooltip with HTML content </span>

<ng-template #HtmlContent>
  <p>Hello i'm a <strong>bold</strong> text!</p>
</ng-template>

<span [tooltip]="HtmlContent" contentType="template"> Tooltip with template content </span>

Set default values

Create a file with your settings, for example:

import { TooltipOptions } from "ng2-tooltip-directive-major-angular-updates";

export const MyDefaultTooltipOptions: TooltipOptions = {
  "show-delay": 500,
};

And pass your parameters when importing the module:

import { TooltipModule, TooltipOptions } from 'ng2-tooltip-directive-major-angular-updates';
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. If 'auto', then it will also delay hiding if the tooltip content is being hovered upon or focused. | | 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 |

Contribution

Do you want to contribute? What are you waiting for? Create a PR and tag me, and we can work together.