How to show a tooltip in angular

[Waelchi]

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

@NgModule({
  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




myfordbenefits