ngx-tooltip-directives - npm Package Compare versions

Comparing version 20.0.2 to 20.1.0

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;

package.json

 {
   "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",

README.md

@@ -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.

No alert changes

Improved metrics

Total package byte prevSize

154973

2.48%

Lines of code

1364

1.72%

Number of lines in readme file

325

4.17%

No dependency changes