{"id":13808818,"url":"https://github.com/mkeller1992/ngx-tooltip-directives","last_synced_at":"2026-01-17T02:55:01.567Z","repository":{"id":168309576,"uuid":"644001841","full_name":"mkeller1992/ngx-tooltip-directives","owner":"mkeller1992","description":"An Angular Tooltip Library","archived":false,"fork":false,"pushed_at":"2025-12-04T17:50:54.000Z","size":4329,"stargazers_count":9,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-08T01:44:29.227Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mkeller1992.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-05-22T15:43:38.000Z","updated_at":"2025-12-04T17:49:36.000Z","dependencies_parsed_at":"2024-01-14T19:06:39.419Z","dependency_job_id":"9b3cb3ad-0bd6-4824-bfea-cd91cae46e18","html_url":"https://github.com/mkeller1992/ngx-tooltip-directives","commit_stats":null,"previous_names":["mkeller1992/ngx-tooltip-directives"],"tags_count":49,"template":false,"template_full_name":null,"purl":"pkg:github/mkeller1992/ngx-tooltip-directives","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller1992%2Fngx-tooltip-directives","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller1992%2Fngx-tooltip-directives/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller1992%2Fngx-tooltip-directives/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller1992%2Fngx-tooltip-directives/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mkeller1992","download_url":"https://codeload.github.com/mkeller1992/ngx-tooltip-directives/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller1992%2Fngx-tooltip-directives/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28492590,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T02:39:23.645Z","status":"ssl_error","status_checked_at":"2026-01-17T02:34:19.649Z","response_time":85,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:52.604Z","updated_at":"2026-01-17T02:55:01.561Z","avatar_url":"https://github.com/mkeller1992.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Tooltips"],"readme":"# ngx-tooltip-directives\n\n[![npm version](https://badge.fury.io/js/ngx-tooltip-directives.svg)](https://badge.fury.io/js/ngx-tooltip-directives)\n![build status](https://github.com/mkeller1992/ngx-tooltip-directives/actions/workflows/npm-publish.yml/badge.svg)\n[![codecov](https://codecov.io/gh/mkeller1992/ngx-tooltip-directives/graph/badge.svg?token=DNQ72Y4VCW)](https://codecov.io/gh/mkeller1992/ngx-tooltip-directives)\n\nThis library offers three different tooltip directives (string, html and template) and draws inspiration from the no longer maintained ng2-tooltip-directive.\n\nThe latest library version is compatible with **Angular 21**.\nStarting with version 20.2.0, `ngx-tooltip-directives` is fully **zoneless-compatible**. \n\nTooltips are informative pop-up tips that appear when you hover over or click on an item, providing helpful additional information or guidance.\n\n---\n\n## 🎯 Demo\nhttps://mkeller1992.github.io/ngx-tooltip-directives/\n\n---\n\n## 📦 Install\n\nTo install the library, enter the following command in your console:\n```\nnpm i ngx-tooltip-directives\n```\n\n## 🛠️ Setup\n### 🧱 For apps based on `Standalone Components`\nImport the directives for the respective tooltips directly in your component:\n```ts\nimport { TooltipHtmlDirective, TooltipStrDirective, TooltipTemplateDirective } from '@ngx-tooltip-directives';\n\n@Component({\n    selector: 'app-root',\n    templateUrl: './app.component.html',\n    styleUrls: ['./app.component.scss'],\n    imports: [TooltipStrDirective, TooltipHtmlDirective, TooltipTemplateDirective]\n})\n```\n\n\n### 🧱 For apps based on `ngModule`\nMake sure you import `NgxTooltipDirectivesModule` into your `@NgModule`:\n```ts\nimport { NgxTooltipDirectivesModule } from 'ngx-tooltip-directives';\n \n@NgModule({\n    imports: [ NgxTooltipDirectivesModule ]\n}) \n```\n\n## 🚀 Usage\nThere are three ways of creating a tooltip:\n    \n### 💬 Pass the tooltip text as a string via `tooltipStr`:\n\n```html\n\u003cdiv tooltipStr=\"Tooltip text\"\u003eShow Tooltip\u003c/div\u003e\n```\n\n### 🧩 Pass the tooltip content as SafeHtml via `tooltipHtml`:\n\n```html\n\u003cdiv [tooltipHtml]=\"safeTooltipHtml\" placement=\"right\"\u003eShow Html Tooltip\u003c/div\u003e\n```\n```ts\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\n// Code skipped for brevity\n\nexport class AppComponent {\n\n  private readonly sanitizer = inject(DomSanitizer);\n\n  rawHtml = '\u003cdiv\u003e\u003cp\u003eThis is a \u003cstrong\u003etooltip\u003c/strong\u003e with HTML\u003c/p\u003e\u003c/div\u003e';\n\n  safeTooltipHtml: SafeHtml = this.sanitizer.bypassSecurityTrustHtml(this.rawHtml);\n}\n```\n\n### 🧪 Pass the tooltip content as template via `tooltipTemplate`:\n\n```html\n\u003cng-template #myTemplate\u003e\n  \u003cdiv style=\"color: blue; font-weight: bold;\"\u003e\n    Tooltip Template\n  \u003c/div\u003e\n\u003c/ng-template\u003e\n\n\u003cdiv [tooltipTemplate]=\"myTemplate\" placement=\"right\"\u003eShow Tooltip Template\u003c/div\u003e\n\n```\n\nUse template with `tooltipContext`:\n\n```ts\ncontext = { estimate: 10 };\n```\n\n```html\n\u003cng-template #myTemplate let-numberOfLessons=\"estimate\"\u003e\n  \u003cdiv style=\"color: blue; font-weight: bold;\"\u003e\n    {{ numberOfLessons }} lessons\n  \u003c/div\u003e\n\u003c/ng-template\u003e\n\n\u003cdiv [tooltipTemplate]=\"myTemplate\"\n     [tooltipContext]=\"context\"\u003e\n     Show Tooltip Template with Context\n\u003c/div\u003e\n```\n\n---\n\n## 🧑‍💻 Trigger tooltip programmatically\n```html\n\u003cdiv tooltip [tooltipStr]=\"'Tooltip text'\" #myTooltip=\"tooltipStr\"\u003e\u003c/div\u003e\n\n\u003cbutton class=\"btn btn-small btn-outline btn-rounded\" (click)=\"show()\"\u003eshow() via component.ts\u003c/button\u003e\n\u003cbutton class=\"btn btn-small btn-outline btn-rounded\" (click)=\"hide()\"\u003ehide() via component.ts\u003c/button\u003e\n```\n```ts\n@ViewChild('myTooltip')\ntooltip!: TooltipStrDirective;\n\nshow() {\n  this.tooltip.show();\n}\n\nhide() {\n  this.tooltip.hide();\n}\n```\n\n---\n\n## ⚙️ 3 ways of setting tooltip options\n\n1 - Options can be set via html-attributes, so they have the highest priority:\n\n```html\n\u003cdiv tooltipStr=\"Tooltip on the right\" textAlign=\"left\" placement=\"right\"\u003eShow Tooltip\u003c/div\u003e\n```\n\n2 - Options can be passed to the tooltips as TooltipOptions object:\n\n```html\n\u003cdiv tooltipStr=\"Tooltip on the right\" [options]=\"myOptions\"\u003eShow Tooltip\u003c/div\u003e\n```\n```ts\nmyOptions: TooltipOptions = {\n    'placement': 'right',\n    'showDelay': 500\n}\n```\n\n\n3 - Options can be set globally when importing the module:\n\nFor apps based on `Standalone Components`:\n\n```ts\nimport { NgxTooltipDirectivesModule, TooltipOptions } from 'ngx-tooltip-directives';\n\nconst myDefaultTooltipOptions: TooltipOptions = {\n  'backgroundColor': 'yellow'\n}\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    importProvidersFrom(\n\t\t\tNgxTooltipDirectivesModule.forRoot(myDefaultTooltipOptions)\n\t\t)\n  ]\n}).catch(err =\u003e console.error(err));\n```\nFor apps based on `ngModule's`:\n\n```ts\nimport { NgxTooltipDirectivesModule, TooltipOptions } from 'ngx-tooltip-directives';\n\nconst myDefaultTooltipOptions: TooltipOptions = {\n  'backgroundColor': 'yellow'\n}\n\n@NgModule({\n    imports: [ \n      NgxTooltipDirectivesModule.forRoot(myDefaultTooltipOptions)\n    ]\n})\n```\n---\n\n### ⚙️ `appendTooltipToBody` – controlling where the tooltip is attached\n\nBy default, tooltips are appended to the `\u003cbody\u003e` to ensure correct positioning regardless of scrollable containers or layout restrictions.  \nIf you want to append the tooltip to the element itself (e.g. for Shadow DOM, strict layouts, or component-scoped tooltips), set:\n\n```html\n\u003cdiv tooltipStr=\"Tooltip\" [options]=\"{ appendTooltipToBody: false }\"\u003e\n  Tooltip with parent-based positioning\n\u003c/div\u003e\n```\n\n---\n\n## 🧾 Properties\n\n| name                  | type                                  | default | description |\n|-----------------------|---------------------------------------|---------|-------------|\n| id                    | string \\| number                      | 0       | A custom id that can be assigned to the tooltip. |\n| placement             | Placement                             | 'top'   | The position of the tooltip. |\n| autoPlacement         | boolean                               | true    | If true, the tooltip will be placed so that it does not go beyond the borders of the browser window. |\n| contentType           | ContentType                           | 'string'| The type of content passed to the tooltip. |\n| textColor             | string                                | 'black' | The color of the tooltip text. |\n| backgroundColor       | string                                | 'white' | The background color of the tooltip. |\n| borderColor           | string                                | 'blue'  | The border color of the tooltip. |\n| textAlign             | \"left\" \\| \"center\" \\| \"right\"         | 'center'| The horizontal alignment of the tooltip text. |\n| padding               | string                                | '10px 13px 10px 13px' | The padding around the tooltip text (top, right, bottom, left). |\n| shadow                | boolean                               | true    | If true, the tooltip will have a shadow. |\n| showDelay             | number                                | 0       | The delay in ms before the tooltip is shown. |\n| hideDelay             | number                                | 0       | The delay in ms before the tooltip is removed. |\n| hideDelayTouchscreen  | number                                | 0       | The delay in ms before the tooltip is hidden on mobile devices. |\n| zIndex                | number                                | 0       | The z-index of the tooltip. |\n| animationDuration     | number                                | 100     | The duration in ms that the animation takes to run from start to finish. |\n| trigger               | \"hover\" \\| \"click\"                    | 'hover' | Specifies how the tooltip is triggered. The closing time is controlled with \"hide-delay\". |\n| tooltipClass          | string                                | ''      | Any additional classes to be passed to the tooltip (target them with `::ng-deep`). |\n| display               | boolean                               | true    | If true, the tooltip is available for display. |\n| displayTouchscreen    | boolean                               | true    | If true, the tooltip will be displayed on mobile devices. |\n| offset                | number                                | 8       | The offset of the tooltip relative to the item. |\n| maxWidth              | string                                | '200px' | The maximum width of the tooltip. |\n| hideDelayAfterClick   | number                                | 0 | The delay in ms before hiding the tooltip when the \"click\" trigger is used. |\n| pointerEvents         | \"auto\" \\| \"none\"                      | 'auto'  | Defines whether or not the tooltip reacts to pointer events. |\n| position              | {top: number, left: number}           | undefined | The coordinates of the tooltip relative to the browser window. |  \n| appendTooltipToBody   | boolean                               | true    | If `true`, the tooltip is appended to the `\u003cbody\u003e` (default). If `false`, it is appended to the parent element. |\n\n---\n\n## 📡 Events\n\nEvents 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.\n\n| Event            | Description                                                                                 |\n|------------------|---------------------------------------------------------------------------------------------|\n| {type: \"show\", position: { top: number; left: number; } | DOMRect } | This event is fired prior to the tooltip's appearance. |\n| {type: \"shown\", position: { top: number; left: number; } | DOMRect} | This event is fired following the tooltip's appearance animation. |\n| {type: \"hide\", position: { top: number; left: number; } | DOMRect} | This event is fired prior to the tooltip being hidden. |\n| {type: \"hidden\", position: { top: number; left: number; } | DOMRect} | This event is fired after the tooltip hiding animation completes. |  \n\n---\n\n## 🤖 Methods\n\nIf 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.\n\n| Method           | Description                                                                                 |\n|------------------|---------------------------------------------------------------------------------------------|\n| show()           | Displays the tooltip. |\n| hide()           | Hides the tooltip. |\n\n---\n\n## 🧪 Testing with NgxTooltipDirectives\n\nTo 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.\n\n### Mocking when component under test is a standalone component\nIn the test initialization you might have to use `.overrideComponent` in order to override the actual directives with the mock-directives that are provided by my library.\n\n```typescript\nimport { TestBed } from \"@angular/core/testing\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\nimport { MockTooltipHtmlDirective, MockTooltipStrDirective, MockTooltipTemplateDirective,\n         TooltipHtmlDirective, TooltipStrDirective, TooltipTemplateDirective } from \"@ngx-tooltip-directives\";\nimport { AppComponent } from \"./app.component\";\n\ndescribe(\"AppComponent\", () =\u003e {\n  beforeEach(async () =\u003e {\n    await TestBed.configureTestingModule({\n      imports: [ AppComponent ],\n      providers: [\n        { provide: DomSanitizer, useValue: { bypassSecurityTrustHtml: () =\u003e {} } },\n      ]\n    })\n    .overrideComponent(AppComponent, {\n      remove: {\n        imports: [\n          TooltipStrDirective,\n          TooltipHtmlDirective,\n          TooltipTemplateDirective\n        ]\n      },\n      add: {\n        imports: [\n          MockTooltipStrDirective,\n          MockTooltipHtmlDirective,\n          MockTooltipTemplateDirective\n        ]\n      }\n    })\n    .compileComponents();\n  });\n  // Your tests here\n});\n```\n\n### Mocking when component under test is a NgModule-based component\n\nImport `MockNgxTooltipDirectivesModule` in your test suite's TestBed configuration:\n\n```typescript\nimport { TestBed } from '@angular/core/testing';\nimport { AppComponent } from './app.component';\nimport { MockNgxTooltipDirectivesModule } from '@ngx-tooltip-directives';\n\ndescribe('AppComponent', () =\u003e {\n  beforeEach(async () =\u003e {\n    await TestBed.configureTestingModule({\n      declarations: [AppComponent],\n      imports: [MockNgxTooltipDirectivesModule]\n    }).compileComponents();\n  });\n\n  // Your tests here\n});\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkeller1992%2Fngx-tooltip-directives","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmkeller1992%2Fngx-tooltip-directives","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkeller1992%2Fngx-tooltip-directives/lists"}