How to show a tooltip in angular

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.

Blog

How to show a tooltip in angular

Bibhu Padhy

Done

Join Our Newsletter. No Spam, Only the good stuff.

Related