ngx-tooltip-directives
Advanced tools
Comparing version
@@ -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
154973
2.48%1364
1.72%325
4.17%