{"id":29747884,"url":"https://github.com/rajratnamaitry/matcustomtooltip","last_synced_at":"2026-01-20T16:55:45.940Z","repository":{"id":304385459,"uuid":"1018620679","full_name":"rajratnamaitry/MatCustomTooltip","owner":"rajratnamaitry","description":"MatCustomTooltip is an Angular library that extends Angular Material's tooltip functionality, allowing you to display rich HTML content and customize tooltip appearance and behavior. With easy integration and flexible options, MatCustomTooltip helps you create interactive, styled tooltips for your Angular applications","archived":false,"fork":false,"pushed_at":"2025-07-15T20:26:05.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-09T11:24:46.221Z","etag":null,"topics":["angular","custom","directive","material-design"],"latest_commit_sha":null,"homepage":"https://rajratnamaitry.github.io/cust-mat-tooltip-project/","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/rajratnamaitry.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}},"created_at":"2025-07-12T16:54:27.000Z","updated_at":"2025-07-15T20:26:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"d0c02f38-bb68-4f7f-8c90-32672a701351","html_url":"https://github.com/rajratnamaitry/MatCustomTooltip","commit_stats":null,"previous_names":["rajratnamaitry/matcustomtooltip"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rajratnamaitry/MatCustomTooltip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajratnamaitry%2FMatCustomTooltip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajratnamaitry%2FMatCustomTooltip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajratnamaitry%2FMatCustomTooltip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajratnamaitry%2FMatCustomTooltip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rajratnamaitry","download_url":"https://codeload.github.com/rajratnamaitry/MatCustomTooltip/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajratnamaitry%2FMatCustomTooltip/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273973959,"owners_count":25200578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["angular","custom","directive","material-design"],"created_at":"2025-07-26T09:18:20.550Z","updated_at":"2026-01-20T16:55:45.933Z","avatar_url":"https://github.com/rajratnamaitry.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mat Custom Tooltip\n\n**MatCustomTooltip** is an Angular library that extends Angular Material's tooltip functionality, allowing you to display rich HTML content and customize tooltip appearance and behavior. With easy integration and flexible options, MatCustomTooltip helps you create interactive, styled tooltips for your Angular applications.\n\n---\n\n**🌐 [Live Demo](https://rajratnamaitry.github.io/cust-mat-tooltip-project/)**\n\n---\n\n## Features\n\n- Supports HTML content in tooltips\n- Customizable position: above, below, left, right, before, after\n- Manual show/hide methods\n- Configurable show/hide delays\n- Accessibility support\n\n## Installation\n\n```sh\nnpm install mat-custom-tooltip\n```\n\n## Usage\n\n1. **Import the module:**\n\n   ```typescript\n   import { MatCustomTooltipModule } from 'mat-custom-tooltip';\n\n   @NgModule({\n     imports: [MatCustomTooltipModule, ...]\n   })\n   export class AppModule { }\n   ```\n\n2. **Add the directive in your template:**\n\n   ```html\n   \u003cbutton\n     #tooltip=\"matCustomTooltip\"\n     matCustomTooltip\n     [tooltipMessage]=\"'\u003cb\u003eCustom HTML Tooltip\u003c/b\u003e\u003cbr\u003eWith multiple lines!'\"\n     tooltipPosition=\"above\"\n   \u003e\n     Hover me!\n   \u003c/button\u003e\n   \u003cbutton mat-button (click)=\"tooltip.show()\"\u003eShow tooltip\u003c/button\u003e\n   ```\n\n3. **Manual show/hide:**\n\n   ```typescript\n   // In your component class\n   @ViewChild('tooltip', { static: false }) tooltip: MatCustomTooltipDirective;\n\n   showTooltip() {\n     this.tooltip.show();\n   }\n\n   hideTooltip() {\n     this.tooltip.hide();\n   }\n   ```\n\n## API\n\n| Input                | Description                                                                 |\n|----------------------|-----------------------------------------------------------------------------|\n| `tooltipMessage`     | The HTML content to display in the tooltip                                  |\n| `tooltipPosition`    | Position: `above`, `below`, `left`, `right`, `before`, `after` (default: below) |\n| `tooltipShowDelay`   | Delay in ms before showing the tooltip                                      |\n| `tooltipHideDelay`   | Delay in ms before hiding the tooltip                                       |\n| `tooltipDisabled`    | Disable the tooltip                                                         |\n\n## Examples\n\n**Basic HTML Tooltip:**\n```html\n\u003cbutton matCustomTooltip [tooltipMessage]=\"'\u003cb\u003eHello!\u003c/b\u003e This is a \u003ci\u003ecustom\u003c/i\u003e tooltip.'\"\u003e\n  Hover for tooltip\n\u003c/button\u003e\n```\n\n**Custom Position and Delay:**\n```html\n\u003cbutton\n  matCustomTooltip\n  [tooltipMessage]=\"'Tooltip on the right!'\"\n  tooltipPosition=\"right\"\n  [tooltipShowDelay]=\"500\"\n  [tooltipHideDelay]=\"1000\"\n\u003e\n  Hover me\n\u003c/button\u003e\n```\n\n**Manual Control:**\n```html\n\u003cbutton #myTooltip=\"matCustomTooltip\" matCustomTooltip [tooltipMessage]=\"'Manual tooltip'\"\u003e\n  Hover or click below\n\u003c/button\u003e\n\u003cbutton mat-button (click)=\"myTooltip.show()\"\u003eShow tooltip\u003c/button\u003e\n\u003cbutton mat-button (click)=\"myTooltip.hide()\"\u003eHide tooltip\u003c/button\u003e\n```\n\n## Notes\n\n- The tooltip's default position is below the element. Use `tooltipPosition` to change this.\n- To display the tooltip relative to the mouse or touch that triggered it, use the `matTooltipPositionAtOrigin` input.\n- By default, the tooltip will be immediately shown when the user's mouse hovers over the tooltip's trigger element and immediately hides when the user's mouse leaves.\n- On mobile, the tooltip is displayed when the user longpresses the element and hides after a delay of 1500ms.\n- To add a delay before showing or hiding the tooltip, you can use the inputs `matTooltipShowDelay` and `matTooltipHideDelay` to provide a delay time in milliseconds.\n- You can configure your app's tooltip default show/hide delays by configuring and providing your options using the `MAT_TOOLTIP_DEFAULT_OPTIONS` injection token.\n- To manually cause the tooltip to show or hide, you can call the `show` and `hide` directive methods, which both accept a number in milliseconds to delay before applying the display change.\n- To completely disable a tooltip, set `matTooltipDisabled`. While disabled, a tooltip will never be shown.\n- `MatTooltip` adds an `aria-describedby` description that provides a reference to a visually hidden element containing the tooltip's message. This provides screen-readers the information needed to read out the tooltip's contents when the end-user focuses on tooltip's trigger. The element referenced by `aria-describedby` is not the tooltip itself, but instead an invisible copy of the tooltip content that is always present in the DOM.\n- Avoid interactions that exclusively show a tooltip with pointer events like click and mouseenter. Always ensure that keyboard users can perform the same set of actions available to mouse and touch users.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajratnamaitry%2Fmatcustomtooltip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajratnamaitry%2Fmatcustomtooltip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajratnamaitry%2Fmatcustomtooltip/lists"}