You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

ngx-tooltip-directives

Package Overview
Dependencies
Maintainers
1
Versions
33
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-tooltip-directives - npm Package Compare versions

Comparing version

to
20.1.0

9

index.d.ts

@@ -40,2 +40,3 @@ import * as i0 from '@angular/core';

};
appendTooltipToBody?: boolean;
}

@@ -84,2 +85,3 @@

});
set appendTooltipToBody(val: boolean);
events: EventEmitter<{

@@ -117,3 +119,3 @@ type: string;

private hideTooltipAfterDelay;
private appendComponentToBody;
private appendTooltipToDomElement;
private setTooltipVisibility;

@@ -127,3 +129,3 @@ private showTooltipOnHostComponent;

static ɵfac: i0.ɵɵFactoryDeclaration<BaseTooltipDirective, [{ optional: true; }, null, null, null, null]>;
static ɵdir: i0.ɵɵDirectiveDeclaration<BaseTooltipDirective, never, never, { "options": { "alias": "options"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "autoPlacement": { "alias": "autoPlacement"; "required": false; }; "textColor": { "alias": "textColor"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; "textAlign": { "alias": "textAlign"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "hideDelayTouchscreen": { "alias": "hideDelayTouchscreen"; "required": false; }; "zIndex": { "alias": "zIndex"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "trigger": { "alias": "trigger"; "required": false; }; "tooltipClass": { "alias": "tooltipClass"; "required": false; }; "display": { "alias": "display"; "required": false; }; "displayTouchscreen": { "alias": "displayTouchscreen"; "required": false; }; "shadow": { "alias": "shadow"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "showDelay": { "alias": "showDelay"; "required": false; }; "hideDelay": { "alias": "hideDelay"; "required": false; }; "hideDelayAfterClick": { "alias": "hideDelayAfterClick"; "required": false; }; "pointerEvents": { "alias": "pointerEvents"; "required": false; }; "position": { "alias": "position"; "required": false; }; }, { "events": "events"; }, never, never, true, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<BaseTooltipDirective, never, never, { "options": { "alias": "options"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "autoPlacement": { "alias": "autoPlacement"; "required": false; }; "textColor": { "alias": "textColor"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; "textAlign": { "alias": "textAlign"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "hideDelayTouchscreen": { "alias": "hideDelayTouchscreen"; "required": false; }; "zIndex": { "alias": "zIndex"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "trigger": { "alias": "trigger"; "required": false; }; "tooltipClass": { "alias": "tooltipClass"; "required": false; }; "display": { "alias": "display"; "required": false; }; "displayTouchscreen": { "alias": "displayTouchscreen"; "required": false; }; "shadow": { "alias": "shadow"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "showDelay": { "alias": "showDelay"; "required": false; }; "hideDelay": { "alias": "hideDelay"; "required": false; }; "hideDelayAfterClick": { "alias": "hideDelayAfterClick"; "required": false; }; "pointerEvents": { "alias": "pointerEvents"; "required": false; }; "position": { "alias": "position"; "required": false; }; "appendTooltipToBody": { "alias": "appendTooltipToBody"; "required": false; }; }, { "events": "events"; }, never, never, true, never>;
}

@@ -176,2 +178,3 @@

tooltipClass: boolean;
hostStylePosition: string;
hostStyleTop: string;

@@ -208,3 +211,3 @@ hostStyleLeft: string;

hideTooltip(): void;
setPosition(): void;
setPosition(isFixedPosition: boolean): void;
private listenToClicksOutsideTooltip;

@@ -211,0 +214,0 @@ private listenToFadeInEnd;

{
"name": "ngx-tooltip-directives",
"version": "20.0.2",
"version": "20.1.0",
"description": "Tooltips for Angular",

@@ -5,0 +5,0 @@ "homepage": "https://mkeller1992.github.io/ngx-tooltip-directives",

@@ -15,3 +15,3 @@ # ngx-tooltip-directives

## Demo
## 🎯 Demo
https://mkeller1992.github.io/ngx-tooltip-directives/

@@ -21,3 +21,3 @@

## Install
## 📦 Install

@@ -29,4 +29,4 @@ To install the library, enter the following command in your console:

## Setup
### For apps based on `Standalone Components`
## 🛠️ Setup
### 🧱 For apps based on `Standalone Components`
Import the directives for the respective tooltips directly in your component:

@@ -45,3 +45,3 @@ ```ts

### For apps based on `ngModule`
### 🧱 For apps based on `ngModule`
Make sure you import `NgxTooltipDirectivesModule` into your `@NgModule`:

@@ -56,6 +56,6 @@ ```ts

## Usage
## 🚀 Usage
There are three ways of creating a tooltip:
### Pass the tooltip text as a string via `tooltipStr`:
### 💬 Pass the tooltip text as a string via `tooltipStr`:

@@ -66,3 +66,3 @@ ```html

### Pass the tooltip content as SafeHtml via `tooltipHtml`:
### 🧩 Pass the tooltip content as SafeHtml via `tooltipHtml`:

@@ -86,3 +86,3 @@ ```html

### Pass the tooltip content as template via `tooltipTemplate`:
### 🧪 Pass the tooltip content as template via `tooltipTemplate`:

@@ -121,3 +121,3 @@ ```html

## Trigger tooltip programmatically
## 🧑‍💻 Trigger tooltip programmatically
```html

@@ -144,3 +144,3 @@ <div tooltip [tooltipStr]="'Tooltip text'" #myTooltip="tooltipStr"></div>

## 3 ways of setting tooltip options
## ⚙️ 3 ways of setting tooltip options

@@ -200,6 +200,18 @@ 1 - Options can be set via html-attributes, so they have the highest priority:

```
---
### ⚙️ `appendTooltipToBody` – controlling where the tooltip is attached
By default, tooltips are appended to the `<body>` to ensure correct positioning regardless of scrollable containers or layout restrictions.
If you want to append the tooltip to the element itself (e.g. for Shadow DOM, strict layouts, or component-scoped tooltips), set:
```html
<div tooltipStr="Tooltip" [options]="{ appendTooltipToBody: false }">
Tooltip with parent-based positioning
</div>
```
---
## Properties
## 🧾 Properties

@@ -232,6 +244,7 @@ | name | type | default | description |

| position | {top: number, left: number} | undefined | The coordinates of the tooltip relative to the browser window. |
| appendTooltipToBody | boolean | true | If `true`, the tooltip is appended to the `<body>` (default). If `false`, it is appended to the parent element. |
---
## Events
## 📡 Events

@@ -249,3 +262,3 @@ Events are called in accordance with the delays specified in the options within the directive. By default, there is a no delay before the tooltip hides.

## Methods
## 🤖 Methods

@@ -261,3 +274,3 @@ If you have defined the directive options, these will be taken into consideration when calling the methods. This includes the delay before the tooltip appears and before it hides.

## Testing with NgxTooltipDirectives
## 🧪 Testing with NgxTooltipDirectives

@@ -264,0 +277,0 @@ To simplify unit testing of components that use `NgxTooltipDirectives`, this library provides a set of mock directives as well as a mock module. You can use these mocks to bypass the actual directive behavior in your tests, focusing on the component logic instead.

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet