{"_id":"@anedomansky/ngx-tooltip","name":"@anedomansky/ngx-tooltip","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@anedomansky/ngx-tooltip","version":"1.0.0","description":"An Angular directive for displaying tooltips.","author":{"name":"Alexander Nedomansky","email":"nedomanskya@outlook.com"},"license":"MIT","keywords":["angular","tooltip","overlay"],"repository":{"type":"git","url":"git+https://git@github.com/anedomansky/ngx-tooltip.git"},"bugs":{"url":"https://github.com/anedomansky/ngx-tooltip/issues"},"homepage":"https://github.com/anedomansky/ngx-tooltip#readme","peerDependencies":{"@angular/cdk":"~16.2.12","@angular/common":"^16.2.12","@angular/core":"^16.2.12"},"dependencies":{"tslib":"^2.6.2"},"exports":{".":{"sass":"./styles/index.scss","types":"./index.d.ts","esm2022":"./esm2022/anedomansky-ngx-tooltip.mjs","esm":"./esm2022/anedomansky-ngx-tooltip.mjs","default":"./fesm2022/anedomansky-ngx-tooltip.mjs"},"./package.json":{"default":"./package.json"}},"sideEffects":false,"module":"fesm2022/anedomansky-ngx-tooltip.mjs","typings":"index.d.ts","gitHead":"fb4f4a14190d9ba7487323f868f848ba5df2b4cb","_id":"@anedomansky/ngx-tooltip@1.0.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-QdIA3bLJx8n5uLiEoaLizlfW42E+wOzAINNjAqTkKCdTdqppbhFChghCTX5/WqZ3f37FzSUWsT787kGOWNroIg==","shasum":"14dfc1b80df17ee7648bc6de084a1f91ba7b5151","tarball":"https://registry.npmjs.org/@anedomansky/ngx-tooltip/-/ngx-tooltip-1.0.0.tgz","fileCount":19,"unpackedSize":60368,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqwbgHjF1PZtnYZyZDMoTApKSixHeA3jGFoM8Vb8nV/gIgWugO1og463+onks4Ii0jCJjEjNF52W+9pKc2CRT7FAA="}]},"_npmUser":{"name":"anedomansky","email":"nedomanskya@outlook.com"},"directories":{},"maintainers":[{"name":"anedomansky","email":"nedomanskya@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-tooltip_1.0.0_1705256330694_0.9472304094355233"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-14T18:18:50.552Z","1.0.0":"2024-01-14T18:18:50.850Z","modified":"2024-01-14T18:18:51.173Z"},"maintainers":[{"name":"anedomansky","email":"nedomanskya@outlook.com"}],"description":"An Angular directive for displaying tooltips.","homepage":"https://github.com/anedomansky/ngx-tooltip#readme","keywords":["angular","tooltip","overlay"],"repository":{"type":"git","url":"git+https://git@github.com/anedomansky/ngx-tooltip.git"},"author":{"name":"Alexander Nedomansky","email":"nedomanskya@outlook.com"},"bugs":{"url":"https://github.com/anedomansky/ngx-tooltip/issues"},"license":"MIT","readme":"# Ngx-tooltip\n\n[![npm version](https://badge.fury.io/js/@anedomansky%2Fngx-tooltip.svg)](https://badge.fury.io/js/@anedomansky%2Fngx-tooltip)\n\nAn Angular directive for displaying tooltips.\n\n## Features\n\n- display text-based and HTML-based tooltips\n- customize the tooltip with your own CSS\n- supports automatic placement (default)\n- uses [Angular CDK Overlay](https://v16.material.angular.io/cdk/overlay/overview)\n- automatically sanatizes the provided tooltip content\n\n## Dependencies\n\n| ngx-tooltip | Angular |\n| ----------- | ------- |\n| current     | 16      |\n\n## Installation\n\n```cli\nnpm install @anedomansky/ngx-tooltip\n```\n\n## Setup\n\nYou'll have to include the ngx-tooltip styles in your `angular.json` file:\n\n```json\n\"prefix\": \"app\",\n\"architect\": {\n  \"build\": {\n    \"builder\": \"@angular-devkit/build-angular:browser\",\n    \"options\": {\n      ...,\n      \"styles\": [\n        \"node_modules/@anedomansky/ngx-tooltip/styles/index.scss\",\n        ...\n      ],\n    },\n```\n\n## Usage\n\nIn order to use the tooltip directive, you just have to import in your component:\n\n`app.component.ts`:\n\n```ts\nimport { NgxTooltipDirective } from \"@anedomansky/ngx-tooltip\";\nimport { Component } from \"@angular/core\";\n\n@Component({\n  selector: \"app-root\",\n  templateUrl: \"./app.component.html\",\n  styleUrls: [\"./app.component.scss\"],\n  standalone: true,\n  imports: [NgxTooltipDirective],\n})\nexport class AppComponent {\n  tooltip = \"My tooltip content\";\n}\n```\n\n`app.component.html`:\n\n```html\n<button type=\"button\" (click)=\"doSomething()\" [ngxTooltip]=\"tooltip\" placement=\"top\" [tooltipId]=\"tooltipId\" [styleClass]=\"styleClass\">Hover me!</button>\n```\n\n## Customization\n\nYou can alter the tooltip's styles. To do so, please add your styles to a global stylesheet:\n\n`styles.scss`:\n\n```scss\n.cdk-overlay-pane .ngx-tooltip {\n  background-color: #fff;\n  border: 2px dotted #000;\n}\n```\n","readmeFilename":"README.md"}