Skip to content

Latest commit

 

History

History
140 lines (100 loc) · 8.6 KB

README.md

File metadata and controls

140 lines (100 loc) · 8.6 KB

Note: I am not the author of this project, see their original repository. The author doesn't seem to maintain its project anymore, so I'm taking over optimizing code and updating to newest Angular versions.

Tooltip for Angular

Build Status

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

Supported Angular versions and optimizations

This version of the library support Angular version 14 and up and also:

  • tooltip doesn't go away when hovered upon;
  • adds many bug fixes and optimizations.

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.