Notus Angular Tooltips

Pop over component that appears to the left/top/right/bottom of a button on user hover. The dynamic part of them is made using Angular and the styles are done using Tailwind CSS.

For this component to properly work, you will need to install popper.js into your project. Please run the following: npm i -E @popperjs/core@2.4.4

Examples

Left

import { Component, ViewChild, ElementRef } from '@angular/core';
import { createPopper } from "@popperjs/core";

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template: `<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button #btnRef (mouseenter)="toggleTooltip()" (mouseleave)="toggleTooltip()" class="bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
left red
    </button>
  </div>
</div>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  popoverShow = false;
  @ViewChild('btnRef',{ static: false }) btnRef:ElementRef;
  popper = document.createElement("div");
  ngOnInit() {
    this.popper.innerHTML = `<div class="bg-red-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg">
  <div>
    <div class="bg-red-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
      red tooltip title
    </div>
    <div class="text-white p-3">
      And here's some amazing content. It's very engaging. Right?
    </div>
  </div>
</div>`;
  }
  toggleTooltip(){
    if(this.popoverShow){
      this.popoverShow = false;
      this.destroyPopper();
    } else {
      this.popoverShow = true;
      this.createPoppper();
    }
  }
  destroyPopper(){
    this.popper.parentNode.removeChild(this.popper);
  }
  createPoppper(){
    createPopper(this.btnRef.nativeElement, this.popper, {
      placement: "left"
    });
    this.btnRef.nativeElement.parentNode.insertBefore(this.popper, this.btnRef.nativeElement.nextSibling);

  }
}

Top

import { Component, ViewChild, ElementRef } from '@angular/core';
import { createPopper } from "@popperjs/core";

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template: `<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button #btnRef (mouseenter)="toggleTooltip()" (mouseleave)="toggleTooltip()" class="bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
top red
    </button>
  </div>
</div>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  popoverShow = false;
  @ViewChild('btnRef',{ static: false }) btnRef:ElementRef;
  popper = document.createElement("div");
  ngOnInit() {
    this.popper.innerHTML = `<div class="bg-red-600 border-0 mb-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg">
  <div>
    <div class="bg-red-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
      red tooltip title
    </div>
    <div class="text-white p-3">
      And here's some amazing content. It's very engaging. Right?
    </div>
  </div>
</div>`;
  }
  toggleTooltip(){
    if(this.popoverShow){
      this.popoverShow = false;
      this.destroyPopper();
    } else {
      this.popoverShow = true;
      this.createPoppper();
    }
  }
  destroyPopper(){
    this.popper.parentNode.removeChild(this.popper);
  }
  createPoppper(){
    createPopper(this.btnRef.nativeElement, this.popper, {
      placement: "top"
    });
    this.btnRef.nativeElement.parentNode.insertBefore(this.popper, this.btnRef.nativeElement.nextSibling);

  }
}
import { Component, ViewChild, ElementRef } from '@angular/core';
import { createPopper } from "@popperjs/core";

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template: `<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button #btnRef (mouseenter)="toggleTooltip()" (mouseleave)="toggleTooltip()" class="bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
right red
    </button>
  </div>
</div>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  popoverShow = false;
  @ViewChild('btnRef',{ static: false }) btnRef:ElementRef;
  popper = document.createElement("div");
  ngOnInit() {
    this.popper.innerHTML = `<div class="bg-red-600 border-0 ml-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg">
  <div>
    <div class="bg-red-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
      red tooltip title
    </div>
    <div class="text-white p-3">
      And here's some amazing content. It's very engaging. Right?
    </div>
  </div>
</div>`;
  }
  toggleTooltip(){
    if(this.popoverShow){
      this.popoverShow = false;
      this.destroyPopper();
    } else {
      this.popoverShow = true;
      this.createPoppper();
    }
  }
  destroyPopper(){
    this.popper.parentNode.removeChild(this.popper);
  }
  createPoppper(){
    createPopper(this.btnRef.nativeElement, this.popper, {
      placement: "right"
    });
    this.btnRef.nativeElement.parentNode.insertBefore(this.popper, this.btnRef.nativeElement.nextSibling);

  }
}

Bottom

import { Component, ViewChild, ElementRef } from '@angular/core';
import { createPopper } from "@popperjs/core";

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template: `<div class="flex flex-wrap">
  <div class="w-full text-center">
    <button #btnRef (mouseenter)="toggleTooltip()" (mouseleave)="toggleTooltip()" class="bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
bottom red
    </button>
  </div>
</div>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  popoverShow = false;
  @ViewChild('btnRef',{ static: false }) btnRef:ElementRef;
  popper = document.createElement("div");
  ngOnInit() {
    this.popper.innerHTML = `<div class="bg-red-600 border-0 mt-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg">
  <div>
    <div class="bg-red-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
      red tooltip title
    </div>
    <div class="text-white p-3">
      And here's some amazing content. It's very engaging. Right?
    </div>
  </div>
</div>`;
  }
  toggleTooltip(){
    if(this.popoverShow){
      this.popoverShow = false;
      this.destroyPopper();
    } else {
      this.popoverShow = true;
      this.createPoppper();
    }
  }
  destroyPopper(){
    this.popper.parentNode.removeChild(this.popper);
  }
  createPoppper(){
    createPopper(this.btnRef.nativeElement, this.popper, {
      placement: "bottom"
    });
    this.btnRef.nativeElement.parentNode.insertBefore(this.popper, this.btnRef.nativeElement.nextSibling);

  }
}

Props

Please check the official PopperJS Documentation.

You can also check the Official PopperJS Github Repository.