How to implement a directive that adds tooltips to form controls dynamically

Question

Can Someone help me regarding How to implement a directive that adds tooltips to form controls dynamically?

Answer 1

Custom Tooltip Directive

1. Create the Directive

import { Directive, Input, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({

  selector: '[appTooltip]'

})

export class TooltipDirective {

  @Input('appTooltip') tooltipText: string = '';

  private tooltipElement: HTMLElement;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {

    this.tooltipElement = this.renderer.createElement('span');

    this.renderer.appendChild(

      this.tooltipElement,

      this.renderer.createText(this.tooltipText)

    );

    this.renderer.addClass(this.tooltipElement, 'tooltip');

    this.renderer.setStyle(this.tooltipElement, 'position', 'absolute');

    this.renderer.setStyle(this.tooltipElement, 'background', '#333');

    this.renderer.setStyle(this.tooltipElement, 'color', '#fff');

    this.renderer.setStyle(this.tooltipElement, 'padding', '4px 8px');

    this.renderer.setStyle(this.tooltipElement, 'borderRadius', '4px');

    this.renderer.setStyle(this.tooltipElement, 'top', `${this.el.nativeElement.offsetTop - 30}px`);

    this.renderer.setStyle(this.tooltipElement, 'left', `${this.el.nativeElement.offsetLeft}px`);

    this.renderer.appendChild(document.body, this.tooltipElement);

  }

  @HostListener('mouseleave') onMouseLeave() {

    if (this.tooltipElement) {

      this.renderer.removeChild(document.body, this.tooltipElement);

      this.tooltipElement = null;

    }

  }

}

2. Usage in Template

<input type="text" appTooltip="Enter your full name" />