How to show a tooltip in angular

UI Components for Vue
Post Reply
Posts: 1
Joined: 02 Jan 2021, 11:45

02 Jan 2021, 11:48

I assume if you are going through this post then you have some idea about angular Framework.

still, let's start from the beginning, open your preferred terminal.

npm install -g @angular/cli
ng new my-app
cd my-app
remove all the boilerplate content from app.component.html and just add a simple h1 tag or a button (basically where you want to show a tooltip).

Code: Select all

<h1 tooltip="This is a tooltip">Hey there </h1>
back to the terminal type

ng generate directive tooltip (CLI will create a directive class)
Go to the created directive class and copy the class name (TooltipDirective)
open app.module.ts and declare it in the declarations (declarations: [TooltipDirective])

Code: Select all

  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, TooltipDirective ],
  bootstrap:    [ AppComponent ]
open TooltipDirective and add

Code: Select all

 tooltip: HTMLElement;
  @Input("tooltip") tooltipTitle: string;
  delay = 500;
  constructor(private el: ElementRef, private renderer: Renderer2) {}
tooltip is the element where we will show the tooltip message.
tooltipTitle by this input we will get the tooltip message from the component


Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests