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/[email protected]
Examples
Left
blueGray tooltip title
And here's some amazing content. It's very engaging. Right?
red tooltip title
And here's some amazing content. It's very engaging. Right?
orange tooltip title
And here's some amazing content. It's very engaging. Right?
amber tooltip title
And here's some amazing content. It's very engaging. Right?
emerald tooltip title
And here's some amazing content. It's very engaging. Right?
teal tooltip title
And here's some amazing content. It's very engaging. Right?
lightBlue tooltip title
And here's some amazing content. It's very engaging. Right?
indigo tooltip title
And here's some amazing content. It's very engaging. Right?
purple tooltip title
And here's some amazing content. It's very engaging. Right?
pink tooltip title
And here's some amazing content. It's very engaging. Right?
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-blueGray-500 text-white active:bg-blueGray-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 blueGray
</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-blueGray-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-blueGray-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
blueGray 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);
}
}
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);
}
}
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-orange-500 text-white active:bg-orange-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 orange
</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-orange-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-orange-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
orange 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);
}
}
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-amber-500 text-white active:bg-amber-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 amber
</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-amber-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-amber-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
amber 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);
}
}
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-emerald-500 text-white active:bg-emerald-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 emerald
</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-emerald-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-emerald-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
emerald 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);
}
}
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-teal-500 text-white active:bg-teal-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 teal
</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-teal-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-teal-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
teal 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);
}
}
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-lightBlue-500 text-white active:bg-lightBlue-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 lightBlue
</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-lightBlue-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-lightBlue-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
lightBlue 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);
}
}
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-indigo-500 text-white active:bg-indigo-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 indigo
</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-indigo-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-indigo-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
indigo 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);
}
}
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-purple-500 text-white active:bg-purple-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 purple
</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-purple-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-purple-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
purple 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);
}
}
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-pink-500 text-white active:bg-pink-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 pink
</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-pink-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-pink-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
pink 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
blueGray tooltip title
And here's some amazing content. It's very engaging. Right?
red tooltip title
And here's some amazing content. It's very engaging. Right?
orange tooltip title
And here's some amazing content. It's very engaging. Right?
amber tooltip title
And here's some amazing content. It's very engaging. Right?
emerald tooltip title
And here's some amazing content. It's very engaging. Right?
teal tooltip title
And here's some amazing content. It's very engaging. Right?
lightBlue tooltip title
And here's some amazing content. It's very engaging. Right?
indigo tooltip title
And here's some amazing content. It's very engaging. Right?
purple tooltip title
And here's some amazing content. It's very engaging. Right?
pink tooltip title
And here's some amazing content. It's very engaging. Right?
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-blueGray-500 text-white active:bg-blueGray-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 blueGray
</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-blueGray-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-blueGray-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
blueGray 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">
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-orange-500 text-white active:bg-orange-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 orange
</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-orange-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-orange-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
orange 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-amber-500 text-white active:bg-amber-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 amber
</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-amber-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-amber-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
amber 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-emerald-500 text-white active:bg-emerald-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 emerald
</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-emerald-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-emerald-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
emerald 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-teal-500 text-white active:bg-teal-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 teal
</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-teal-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-teal-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
teal 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-lightBlue-500 text-white active:bg-lightBlue-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 lightBlue
</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-lightBlue-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-lightBlue-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
lightBlue 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-indigo-500 text-white active:bg-indigo-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 indigo
</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-indigo-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-indigo-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
indigo 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-purple-500 text-white active:bg-purple-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 purple
</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-purple-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-purple-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
purple 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-pink-500 text-white active:bg-pink-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 pink
</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-pink-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-pink-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
pink 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);
}
}
Right
blueGray tooltip title
And here's some amazing content. It's very engaging. Right?
red tooltip title
And here's some amazing content. It's very engaging. Right?
orange tooltip title
And here's some amazing content. It's very engaging. Right?
amber tooltip title
And here's some amazing content. It's very engaging. Right?
emerald tooltip title
And here's some amazing content. It's very engaging. Right?
teal tooltip title
And here's some amazing content. It's very engaging. Right?
lightBlue tooltip title
And here's some amazing content. It's very engaging. Right?
indigo tooltip title
And here's some amazing content. It's very engaging. Right?
purple tooltip title
And here's some amazing content. It's very engaging. Right?
pink tooltip title
And here's some amazing content. It's very engaging. Right?
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-blueGray-500 text-white active:bg-blueGray-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 blueGray
</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-blueGray-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-blueGray-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
blueGray 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);
}
}
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);
}
}
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-orange-500 text-white active:bg-orange-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 orange
</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-orange-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-orange-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
orange 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);
}
}
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-amber-500 text-white active:bg-amber-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 amber
</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-amber-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-amber-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
amber 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);
}
}
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-emerald-500 text-white active:bg-emerald-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 emerald
</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-emerald-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-emerald-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
emerald 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);
}
}
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-teal-500 text-white active:bg-teal-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 teal
</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-teal-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-teal-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
teal 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);
}
}
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-lightBlue-500 text-white active:bg-lightBlue-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 lightBlue
</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-lightBlue-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-lightBlue-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
lightBlue 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);
}
}
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-indigo-500 text-white active:bg-indigo-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 indigo
</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-indigo-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-indigo-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
indigo 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);
}
}
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-purple-500 text-white active:bg-purple-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 purple
</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-purple-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-purple-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
purple 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);
}
}
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-pink-500 text-white active:bg-pink-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 pink
</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-pink-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-pink-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
pink 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
blueGray tooltip title
And here's some amazing content. It's very engaging. Right?
red tooltip title
And here's some amazing content. It's very engaging. Right?
orange tooltip title
And here's some amazing content. It's very engaging. Right?
amber tooltip title
And here's some amazing content. It's very engaging. Right?
emerald tooltip title
And here's some amazing content. It's very engaging. Right?
teal tooltip title
And here's some amazing content. It's very engaging. Right?
lightBlue tooltip title
And here's some amazing content. It's very engaging. Right?
indigo tooltip title
And here's some amazing content. It's very engaging. Right?
purple tooltip title
And here's some amazing content. It's very engaging. Right?
pink tooltip title
And here's some amazing content. It's very engaging. Right?
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-blueGray-500 text-white active:bg-blueGray-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 blueGray
</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-blueGray-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-blueGray-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
blueGray 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);
}
}
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);
}
}
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-orange-500 text-white active:bg-orange-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 orange
</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-orange-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-orange-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
orange 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);
}
}
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-amber-500 text-white active:bg-amber-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 amber
</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-amber-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-amber-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
amber 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);
}
}
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-emerald-500 text-white active:bg-emerald-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 emerald
</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-emerald-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-emerald-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
emerald 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);
}
}
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-teal-500 text-white active:bg-teal-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 teal
</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-teal-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-teal-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
teal 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);
}
}
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-lightBlue-500 text-white active:bg-lightBlue-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 lightBlue
</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-lightBlue-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-lightBlue-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
lightBlue 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);
}
}
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-indigo-500 text-white active:bg-indigo-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 indigo
</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-indigo-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-indigo-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
indigo 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);
}
}
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-purple-500 text-white active:bg-purple-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 purple
</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-purple-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-purple-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
purple 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);
}
}
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-pink-500 text-white active:bg-pink-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 pink
</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-pink-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-pink-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg">
pink 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.