Tailwind CSS Tooltips - Notus JS
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 Javascript 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]
Or, if you are not used to workin with terminal and HTML, please add
the following script:
<script src="https://unpkg.com/@popperjs/core@2"
charset="utf-8"></script>
Tailwind CSS Tooltip Examples
Left
Check our tooltip examples that came in different colors and positions.
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?
<div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'left','popover-id-left-blueGray')" onmouseleave="toggleTooltip(event,'left','popover-id-left-blueGray')">
left blueGray
</button>
<div class="hidden 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" id="popover-id-left-blueGray">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'left','popover-id-left-red')" onmouseleave="toggleTooltip(event,'left','popover-id-left-red')">
left red
</button>
<div class="hidden 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" id="popover-id-left-red">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'left','popover-id-left-orange')" onmouseleave="toggleTooltip(event,'left','popover-id-left-orange')">
left orange
</button>
<div class="hidden 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" id="popover-id-left-orange">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'left','popover-id-left-amber')" onmouseleave="toggleTooltip(event,'left','popover-id-left-amber')">
left amber
</button>
<div class="hidden 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" id="popover-id-left-amber">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'left','popover-id-left-emerald')" onmouseleave="toggleTooltip(event,'left','popover-id-left-emerald')">
left emerald
</button>
<div class="hidden 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" id="popover-id-left-emerald">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'left','popover-id-left-teal')" onmouseleave="toggleTooltip(event,'left','popover-id-left-teal')">
left teal
</button>
<div class="hidden 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" id="popover-id-left-teal">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'left','popover-id-left-lightBlue')" onmouseleave="toggleTooltip(event,'left','popover-id-left-lightBlue')">
left lightBlue
</button>
<div class="hidden 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" id="popover-id-left-lightBlue">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'left','popover-id-left-indigo')" onmouseleave="toggleTooltip(event,'left','popover-id-left-indigo')">
left indigo
</button>
<div class="hidden 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" id="popover-id-left-indigo">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'left','popover-id-left-purple')" onmouseleave="toggleTooltip(event,'left','popover-id-left-purple')">
left purple
</button>
<div class="hidden 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" id="popover-id-left-purple">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'left','popover-id-left-pink')" onmouseleave="toggleTooltip(event,'left','popover-id-left-pink')">
left pink
</button>
<div class="hidden 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" id="popover-id-left-pink">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script>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?
<div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'top','popover-id-top-blueGray')" onmouseleave="toggleTooltip(event,'top','popover-id-top-blueGray')">
top blueGray
</button>
<div class="hidden 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" id="popover-id-top-blueGray">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'top','popover-id-top-red')" onmouseleave="toggleTooltip(event,'top','popover-id-top-red')">
top red
</button>
<div class="hidden 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" id="popover-id-top-red">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'top','popover-id-top-orange')" onmouseleave="toggleTooltip(event,'top','popover-id-top-orange')">
top orange
</button>
<div class="hidden 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" id="popover-id-top-orange">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'top','popover-id-top-amber')" onmouseleave="toggleTooltip(event,'top','popover-id-top-amber')">
top amber
</button>
<div class="hidden 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" id="popover-id-top-amber">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'top','popover-id-top-emerald')" onmouseleave="toggleTooltip(event,'top','popover-id-top-emerald')">
top emerald
</button>
<div class="hidden 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" id="popover-id-top-emerald">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'top','popover-id-top-teal')" onmouseleave="toggleTooltip(event,'top','popover-id-top-teal')">
top teal
</button>
<div class="hidden 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" id="popover-id-top-teal">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'top','popover-id-top-lightBlue')" onmouseleave="toggleTooltip(event,'top','popover-id-top-lightBlue')">
top lightBlue
</button>
<div class="hidden 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" id="popover-id-top-lightBlue">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'top','popover-id-top-indigo')" onmouseleave="toggleTooltip(event,'top','popover-id-top-indigo')">
top indigo
</button>
<div class="hidden 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" id="popover-id-top-indigo">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'top','popover-id-top-purple')" onmouseleave="toggleTooltip(event,'top','popover-id-top-purple')">
top purple
</button>
<div class="hidden 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" id="popover-id-top-purple">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'top','popover-id-top-pink')" onmouseleave="toggleTooltip(event,'top','popover-id-top-pink')">
top pink
</button>
<div class="hidden 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" id="popover-id-top-pink">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script>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?
<div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'right','popover-id-right-blueGray')" onmouseleave="toggleTooltip(event,'right','popover-id-right-blueGray')">
right blueGray
</button>
<div class="hidden 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" id="popover-id-right-blueGray">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'right','popover-id-right-red')" onmouseleave="toggleTooltip(event,'right','popover-id-right-red')">
right red
</button>
<div class="hidden 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" id="popover-id-right-red">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'right','popover-id-right-orange')" onmouseleave="toggleTooltip(event,'right','popover-id-right-orange')">
right orange
</button>
<div class="hidden 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" id="popover-id-right-orange">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'right','popover-id-right-amber')" onmouseleave="toggleTooltip(event,'right','popover-id-right-amber')">
right amber
</button>
<div class="hidden 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" id="popover-id-right-amber">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'right','popover-id-right-emerald')" onmouseleave="toggleTooltip(event,'right','popover-id-right-emerald')">
right emerald
</button>
<div class="hidden 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" id="popover-id-right-emerald">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'right','popover-id-right-teal')" onmouseleave="toggleTooltip(event,'right','popover-id-right-teal')">
right teal
</button>
<div class="hidden 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" id="popover-id-right-teal">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'right','popover-id-right-lightBlue')" onmouseleave="toggleTooltip(event,'right','popover-id-right-lightBlue')">
right lightBlue
</button>
<div class="hidden 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" id="popover-id-right-lightBlue">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'right','popover-id-right-indigo')" onmouseleave="toggleTooltip(event,'right','popover-id-right-indigo')">
right indigo
</button>
<div class="hidden 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" id="popover-id-right-indigo">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'right','popover-id-right-purple')" onmouseleave="toggleTooltip(event,'right','popover-id-right-purple')">
right purple
</button>
<div class="hidden 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" id="popover-id-right-purple">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'right','popover-id-right-pink')" onmouseleave="toggleTooltip(event,'right','popover-id-right-pink')">
right pink
</button>
<div class="hidden 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" id="popover-id-right-pink">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script>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?
<div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'bottom','popover-id-bottom-blueGray')" onmouseleave="toggleTooltip(event,'bottom','popover-id-bottom-blueGray')">
bottom blueGray
</button>
<div class="hidden 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" id="popover-id-bottom-blueGray">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'bottom','popover-id-bottom-red')" onmouseleave="toggleTooltip(event,'bottom','popover-id-bottom-red')">
bottom red
</button>
<div class="hidden 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" id="popover-id-bottom-red">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'bottom','popover-id-bottom-orange')" onmouseleave="toggleTooltip(event,'bottom','popover-id-bottom-orange')">
bottom orange
</button>
<div class="hidden 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" id="popover-id-bottom-orange">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'bottom','popover-id-bottom-amber')" onmouseleave="toggleTooltip(event,'bottom','popover-id-bottom-amber')">
bottom amber
</button>
<div class="hidden 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" id="popover-id-bottom-amber">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'bottom','popover-id-bottom-emerald')" onmouseleave="toggleTooltip(event,'bottom','popover-id-bottom-emerald')">
bottom emerald
</button>
<div class="hidden 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" id="popover-id-bottom-emerald">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'bottom','popover-id-bottom-teal')" onmouseleave="toggleTooltip(event,'bottom','popover-id-bottom-teal')">
bottom teal
</button>
<div class="hidden 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" id="popover-id-bottom-teal">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'bottom','popover-id-bottom-lightBlue')" onmouseleave="toggleTooltip(event,'bottom','popover-id-bottom-lightBlue')">
bottom lightBlue
</button>
<div class="hidden 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" id="popover-id-bottom-lightBlue">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'bottom','popover-id-bottom-indigo')" onmouseleave="toggleTooltip(event,'bottom','popover-id-bottom-indigo')">
bottom indigo
</button>
<div class="hidden 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" id="popover-id-bottom-indigo">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'bottom','popover-id-bottom-purple')" onmouseleave="toggleTooltip(event,'bottom','popover-id-bottom-purple')">
bottom purple
</button>
<div class="hidden 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" id="popover-id-bottom-purple">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script><div class="flex flex-wrap">
<div class="w-full text-center">
<button 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" onmouseenter="toggleTooltip(event,'bottom','popover-id-bottom-pink')" onmouseleave="toggleTooltip(event,'bottom','popover-id-bottom-pink')">
bottom pink
</button>
<div class="hidden 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" id="popover-id-bottom-pink">
<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>
</div>
</div>
<script src="https://unpkg.com/@popperjs/core@2" charset="utf-8"></script>
<script>
function toggleTooltip(event,placement,popoverID){
let element = event.target;
while(element.nodeName !== "BUTTON"){
element = element.parentNode;
}
Popper.createPopper(element, document.getElementById(popoverID), {
placement: placement
});
document.getElementById(popoverID).classList.toggle("hidden");
}
</script>Props
Please check the official PopperJS Documentation.
You can also check the Official PopperJS Github Repository.