How to show a tooltip in angular
Tags: angular, html, css, typescript
Published: 2020-11-10 07:00:33

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).

```
<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])

```
@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, TooltipDirective ],
  bootstrap:    [ AppComponent ]
})
```

* open TooltipDirective and add


```
  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 

```

  @HostListener("mouseover") onMouseEnter() {
    showTooltip();
  }

  @HostListener("mouseleave") onMouseLeave() {
    hidetooltip();
  }

```

* onMouseEnter and onMouseLeave functions triggers by their respective event listeners.lets continue with the showToolTip function

```
  showTooltip() {
    this.tooltip = this.renderer.createElement("span"); 
    // creating a span
    this.tooltip.appendChild(this.renderer.createElement("span")); 
    // appending a span to the tooltip

    this.renderer.appendChild(
      this.tooltip,
      this.renderer.createText(this.tooltipTitle) 
      // adding the tooltip text into the tooltip span
    );
    const hostPos = this.el.nativeElement.getBoundingClientRect(); 
    // getting the hight width and positions of the target element
    let top, left;

    top = hostPos.bottom;
    left = hostPos.left + hostPos.width / 2;
    this.renderer.setStyle(this.tooltip, "top", `${top}px`); 
    //adding a top positions value for the tooltip
    this.renderer.setStyle(this.tooltip, "left", `${left}px`); 
    // adding the left value
    this.renderer.appendChild(document.body, this.tooltip); 
   // appending to the document
    this.renderer.addClass(this.tooltip, "tooltip"); 
   // adding the tooltip styles
  }
```

* required CSS (you can add the below CSS in the root style file of your project)

```
.tooltip {
  position: absolute;
  max-width: 90%;
  font-size: 14px;
  text-align: center;
  color: #f8f8f2;
  padding: 5px;
  background: #1e1e1f;
  z-index: 1000;
  opacity: 0;
}

.tooltip_show {
  opacity: 1;
}
```


* to remove the tooltip on mouse leave

```
  @HostListener("mouseleave") onMouseLeave() {
    this.renderer.removeClass(this.tooltip, "tooltip_show");
     // on mouse over it will remove the opacity
  }
```
I have used this directive in a mobile app, There I am looking for a click event instead of mouseleave I guess you know why.

<h2>Done

{% stackblitz angular-ivy-gnbyp4 %}