{"id":21231572,"url":"https://github.com/piyalidas10/tooltip-component-angular-6","last_synced_at":"2026-02-22T21:39:04.354Z","repository":{"id":43430122,"uuid":"246044212","full_name":"piyalidas10/Tooltip-Component-Angular-6","owner":"piyalidas10","description":"Dynamically Loaded Tooltip by Angular 6","archived":false,"fork":false,"pushed_at":"2023-01-01T17:23:36.000Z","size":4932,"stargazers_count":1,"open_issues_count":23,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-05T15:21:47.686Z","etag":null,"topics":["angular","angular-tooltip","angular6","dynamic-component","tooltip","tooltip-component","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/piyalidas10.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-09T13:33:50.000Z","updated_at":"2020-03-12T13:08:44.000Z","dependencies_parsed_at":"2023-02-01T00:02:18.000Z","dependency_job_id":null,"html_url":"https://github.com/piyalidas10/Tooltip-Component-Angular-6","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/piyalidas10/Tooltip-Component-Angular-6","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FTooltip-Component-Angular-6","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FTooltip-Component-Angular-6/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FTooltip-Component-Angular-6/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FTooltip-Component-Angular-6/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/piyalidas10","download_url":"https://codeload.github.com/piyalidas10/Tooltip-Component-Angular-6/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FTooltip-Component-Angular-6/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29728497,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-22T20:09:16.275Z","status":"ssl_error","status_checked_at":"2026-02-22T20:09:13.750Z","response_time":110,"last_error":"SSL_read: 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":["angular","angular-tooltip","angular6","dynamic-component","tooltip","tooltip-component","typescript"],"created_at":"2024-11-20T23:47:21.276Z","updated_at":"2026-02-22T21:39:04.336Z","avatar_url":"https://github.com/piyalidas10.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tooltip-Component-Angular-6\nDynamically Loaded Tooltip by Angular-6\n\n### Run the application\n```\nng serve\nlocalhost:4200\n```\n    \n\n### App Component\nFour tooltips with four directions. Sending 3 inputs (tooltipDirection, title, tooltipData) to tooltip-box diective \n\n### app.component.html\n\n    \u003cdiv class=\"row\"\u003e\n      \u003cdiv class=\"col-12\"\u003e\n        \u003cul role=\"list\"\u003e\n          \u003cli role=\"listitem\"\u003e\n            \u003cdiv class=\"tooltipbox\"\u003e\n              \u003cspan\u003eTooltip Left side\u003c/span\u003e\n              \u003cbutton aria-haspopup=\"true\" tooltip-box [tooltipDirection]=\"'left'\" [title]=\"tooltipObj1.title\" [tooltipData]=\"tooltipObj1.content\"\u003e\n                \u003ci class=\"fa fa-info-circle\" aria-hidden=\"true\"\u003e\u003c/i\u003e\n                \u003cspan class=\"sr-only\"\u003e{{tooltipObj1.title}}\u003c/span\u003e\n              \u003c/button\u003e\n            \u003c/div\u003e\n          \u003c/li\u003e\n          \u003cli role=\"listitem\"\u003e\n            \u003cdiv class=\"tooltipbox\"\u003e\n              \u003cspan\u003eTooltip Right side\u003c/span\u003e\n              \u003cbutton aria-haspopup=\"true\" tooltip-box [tooltipDirection]=\"'right'\" [title]=\"tooltipObj2.title\" [tooltipData]=\"tooltipObj2.content\"\u003e\n                \u003ci class=\"fa fa-info-circle\" aria-hidden=\"true\"\u003e\u003c/i\u003e\n                \u003cspan class=\"sr-only\"\u003e{{tooltipObj2.title}}\u003c/span\u003e\n              \u003c/button\u003e\n            \u003c/div\u003e\n          \u003c/li\u003e\n          \u003cli role=\"listitem\"\u003e\n            \u003cdiv class=\"tooltipbox\"\u003e\n              \u003cspan\u003eTooltip Top side\u003c/span\u003e\n              \u003cbutton aria-haspopup=\"true\" tooltip-box [tooltipDirection]=\"'top'\" [title]=\"tooltipObj3.title\" [tooltipData]=\"tooltipObj3.content\"\u003e\n                \u003ci class=\"fa fa-info-circle\" aria-hidden=\"true\"\u003e\u003c/i\u003e\n                \u003cspan class=\"sr-only\"\u003e{{tooltipObj3.title}}\u003c/span\u003e\n              \u003c/button\u003e\n            \u003c/div\u003e\n          \u003c/li\u003e\n          \u003cli role=\"listitem\"\u003e\n            \u003cdiv class=\"tooltipbox\"\u003e\n              \u003cspan\u003eTooltip Bottom side\u003c/span\u003e\n              \u003cbutton aria-haspopup=\"true\" tooltip-box [tooltipDirection]=\"'bottom'\" [title]=\"tooltipObj4.title\" [tooltipData]=\"tooltipObj4.content\"\u003e\n                \u003ci class=\"fa fa-info-circle\" aria-hidden=\"true\"\u003e\u003c/i\u003e\n                \u003cspan class=\"sr-only\"\u003e{{tooltipObj4.title}}\u003c/span\u003e\n              \u003c/button\u003e\n            \u003c/div\u003e\n          \u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n\n### app.component.ts\nHave four object values for four tooltips with title and content\n\n    export class AppComponent implements OnInit {\n      tooltipObj1: any;\n      tooltipObj2: any;\n      tooltipObj3: any;\n      tooltipObj4: any;\n\n\n      ngOnInit() {\n        this.tooltipObj1 = {\n            title: 'Tooltip Heading One',\n            content: 'Lorem Ipsum is simply dummy text of the printing and \u003ca href=\"#\"\u003etypesetting industry\u003c/a\u003e.'\n        };\n        this.tooltipObj2 = {\n          title: 'Tooltip Heading Two',\n          content: 'Lorem Ipsum is simply dummy text of the printing and \u003ca href=\"#\"\u003etypesetting industry\u003c/a\u003e.'\n        };\n        this.tooltipObj3 = {\n          title: 'Tooltip Heading Three',\n          content: 'Lorem Ipsum is simply dummy text of the printing and \u003ca href=\"#\"\u003etypesetting industry\u003c/a\u003e.'\n        };\n        this.tooltipObj4 = {\n          title: 'Tooltip Heading Four',\n          content: 'Lorem Ipsum is simply dummy text of the printing and \u003ca href=\"#\"\u003etypesetting industry\u003c/a\u003e.'\n        };\n      }\n\n    }\n\n### app.module.ts\n\n    import { BrowserModule } from '@angular/platform-browser';\n    import { NgModule } from '@angular/core';\n    import { HttpClientModule } from '@angular/common/http';\n\n    import { AppComponent } from './app.component';\n    import { TooltipComponent } from './tooltip/tooltip.component';\n    import { TooltipDirective } from './tooltip.directive';\n\n    @NgModule({\n      declarations: [\n        AppComponent,\n        TooltipDirective,\n        TooltipComponent\n      ],\n      providers: [],\n      imports: [\n        BrowserModule,\n        HttpClientModule\n      ],\n      entryComponents: [\n        TooltipComponent\n      ],\n      bootstrap: [AppComponent]\n    })\n    export class AppModule { }\n\n\nentryComponent is used for components declaration which will be loaded dynamically.\n\n## Tooltip Directive\n### tooltip.directive.ts\n\n    import {\n      Directive, Input, Output, EventEmitter, ElementRef,\n      HostListener, Renderer2, ViewContainerRef, ComponentFactoryResolver, OnInit, OnChanges\n    } from '@angular/core';\n    import { TooltipComponent } from './tooltip/tooltip.component';\n\n    @Directive({\n      selector: '[tooltip-box]'\n    })\n    export class TooltipDirective implements OnInit, OnChanges {\n      @Input() tooltipDirection: string;\n      @Input() title: string;\n      @Input() tooltipData: string;\n      tooltipElement: any;\n      tooltipComponentRef: any;\n\n      constructor(\n        private el: ElementRef,\n        private ren: Renderer2,\n        private viewContainer: ViewContainerRef,\n        private componentFactoryResolver: ComponentFactoryResolver\n      ) { }\n\n      ngOnInit() {\n      }\n\n      ngOnChanges() {\n      }\n\n      @HostListener('mouseover', ['$event'])\n      mouseOver() {\n        this.openTooltip();\n      }\n\n\n      @HostListener('mouseout', ['$event'])\n      mouseOut() {\n        this.closeTooltip();\n      }\n\n      @HostListener('focus', ['$event'])\n      focusMove() {\n        this.openTooltip();\n      }\n\n      @HostListener('blur', ['$event'])\n      focusOut() {\n        this.closeTooltip();\n      }\n\n      /* tooltip create */\n      openTooltip() {\n        console.log('Tooltip directive is called.');\n        this.tooltipElement = this.el.nativeElement;\n        this.ren.setAttribute(this.tooltipElement, 'tabindex', '0');\n        this.ren.setAttribute(this.tooltipElement, 'aria-haspopup', 'true');\n        console.log('tooltipElement =\u003e ', this.tooltipElement);\n        this.createtooltipDialog(TooltipComponent);\n      }\n\n      createtooltipDialog(comp) {\n        console.log('CreatetooltipDialog is called');\n        this.viewContainer.clear();\n        const TooltipComponentFactory = this.componentFactoryResolver.resolveComponentFactory(comp);\n        this.tooltipComponentRef = this.viewContainer.createComponent(TooltipComponentFactory);\n        this.tooltipComponentRef.instance['tooltipDirection'] = this.tooltipDirection;\n        this.tooltipComponentRef.instance['title'] = this.title;\n        this.tooltipComponentRef.instance['tooltipData'] = this.tooltipData;\n        return this.tooltipComponentRef;\n      }\n\n      closeTooltip() {\n        this.tooltipComponentRef.destroy();\n      }\n\n\n    }\n\n@HostListener() function decorator allows you to handle events of the host element in the tooltip directive. \n1.  @HostListener('mouseover', ['$event']) ----- when you hover you mouse over the host element, tooltip component will be created by using openTooltip().\n2.  @HostListener('mouseout', ['$event']) ----- when you hover you mouse out the host element, tooltip component will be closed by using closeTooltip().\n3.  @HostListener('focus', ['$event']) ----- when you focus on the host element, tooltip component will be created by using openTooltip().\n4.  @HostListener('blur', ['$event']) ----- when you focus out the host element, tooltip component will be closed by using closeTooltip().\n\n\ncreatetooltipDialog() function is used to create tooltip componenet dynamically. You have to send TooltipComponent through resolveComponenetFactory to create factory then will create component using createComponent function. We are fetching values of tooltipDirection, title, tooltipData from tooltipbox div which were declared in app.componenet.html. These value are sending using tooltipComponentRef.instance to tooltip.componenet.ts. \n\ncloseTooltip() is used to destroy the tooltip component from DOM element.\n\n\n\n## Tooltip Component\n### tooltip.component.html\n\n    \u003cdiv class=\"tooltiptext {{tooltipDirection}}\"  role=\"tooltip\" [innerHTML]=\"tooltipData\"\u003e\n    \u003c/div\u003e\n\n\n### tooltip.component.ts\n\n    import { Component, OnInit, Input } from '@angular/core';\n\n    @Component({\n      selector: 'app-tooltip',\n      templateUrl: './tooltip.component.html',\n      styleUrls: ['./tooltip.component.css']\n    })\n    export class TooltipComponent implements OnInit {\n      @Input() tooltipDirection: string;\n      @Input() title: string;\n      @Input() tooltipData: string;\n      constructor() { }\n\n      ngOnInit() {\n      }\n\n    }\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Ftooltip-component-angular-6","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiyalidas10%2Ftooltip-component-angular-6","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Ftooltip-component-angular-6/lists"}