This is a tooltip
The tooltip, also known as infotip or hint, is a common graphical user...
Components
Tailwind CSS Tooltip
Tailwind tooltip is a commonly used UI element that provides additional information about an element when a user hovers their mouse pointer over it. Tooltips can appear in various positions relative to the element they are associated with. It can be shown on the top, bottom, right or left.
Requires Pagedone JS
This component requires the use of our Pagedone UI as a package, else you can skip this message if you are already using Pagedone UI as a package.
New tooltip can be created by adding
data-tooltip-target="{elementId}"
data attribute where element (ie. button)
Add unique id to element where you tooltip data is writtern.
Default Tooltip
Tailwind tooltip examples allows you to set positioning of the tooltip using Tailwind CSS utility classes. You can set as per the design requirement of the page. Four main positioning of the tooltip can be top, bottom, right and left.
This is a tooltip
This is a tooltip
This is a tooltip
This is a tooltip
<div class="w-full flex justify-center gap-3 py-6">
<!-- Show tooltip on top -->
<div class="relative inline-block">
<button
class="bg-primary inline-flex rounded text-base font-semibold text-black whitespace-nowrap"
data-tooltip-target="top-tooltip">
Tooltip on top
</button>
<div
class="absolute bottom-full invisible left-1/2 z-20 mb-3 -translate-x-1/2 whitespace-nowrap rounded-md bg-white py-2 px-4 text-xs text-gray-800 font-medium transition-opacity duration-300 border border-gray-300 shadow-[0px_12px_30px_-4px_rgba(16,24,40,0.08);]"
role="tooltip" id="top-tooltip">
<span
class="absolute -bottom-1.5 left-1/2 -z-10 h-3 w-3 border-b border-r border-gray-300 -translate-x-1/2 rotate-45 bg-white"></span>
This is a tooltip
</div>
</div>
<!-- Show tooltip on right -->
<div class="relative inline-block">
<button
class="bg-primary inline-flex rounded text-base font-semibold text-black whitespace-nowrap"
data-tooltip-target="right-tooltip">
Tooltip on right
</button>
<div
class="absolute left-full invisible top-1/2 z-20 ml-3 -translate-y-1/2 border border-gray-300 whitespace-nowrap rounded-md bg-white py-3 px-4 text-xs text-gray-800 font-medium transition-opacity duration-300 shadow-[-12px_0px_30px_-4px_rgba(16,24,40,0.08)]"
role="tooltip" id="right-tooltip">
<span
class="absolute -left-1.5 top-1/2 -z-10 h-3 w-3 border-gray-300 border-b border-l -translate-y-1/2 rotate-45 bg-white"></span>
This is a tooltip
</div>
</div>
<!-- Show tooltip on bottom -->
<div class="relative inline-block">
<button
class="bg-primary inline-flex rounded text-base font-semibold text-black whitespace-nowrap"
data-tooltip-target="bottom-tooltip">
Tooltip on bottom
</button>
<div
class="absolute top-full invisible left-1/2 z-20 mt-3 border border-gray-300 -translate-x-1/2 whitespace-nowrap rounded-md bg-white py-2 px-4 text-xs text-gray-800 font-medium transition-opacity duration-300 shadow-[0px_-12px_30px_-4px_rgba(16,24,40,0.08)]"
role="tooltip" id="bottom-tooltip">
<span
class="absolute -top-1.5 left-1/2 -z-10 h-3 w-3 border-t border-l rounded-sm border-gray-300 -translate-x-1/2 rotate-45 bg-white"></span>
This is a tooltip
</div>
</div>
<!-- Show tooltip on left -->
<div class="relative inline-block">
<button
class="bg-primary inline-flex rounded text-base font-semibold text-black whitespace-nowrap"
data-tooltip-target="left-tooltip">
Tooltip on left
</button>
<div
class="absolute right-full invisible top-1/2 z-20 mr-3 -translate-y-1/2 whitespace-nowrap rounded-md bg-white py-3 border border-gray-300 px-4 text-xs text-gray-800 font-medium transition-opacity duration-300 shadow-[12px_0px_30px_-4px_rgba(16,24,40,0.08)]"
role="tooltip" id="left-tooltip">
<span
class="absolute -right-1.5 top-1/2 -z-10 h-3 w-3 -translate-y-1/2 rotate-45 rounded-sm bg-white border-t border-r border-gray-300"></span>
This is a tooltip
</div>
</div>
</div>
Tooltip styles
Tailwind tooltip examples allows you to set positioning of the tooltip using Tailwind CSS utility classes. You can set as per the design requirement of the page. Four main positioning of the tooltip can be top, bottom, right and left.
This is a tooltip
This is a tooltip
<div class="w-full flex justify-center gap-5 py-6">
<!-- Show tooltip white -->
<div class="relative inline-block">
<button
class="bg-primary inline-flex rounded text-base font-semibold text-black whitespace-nowrap"
data-tooltip-target="light-tooltip">
Light Tooltip
</button>
<div
class="absolute bottom-full invisible left-1/2 z-20 mb-3 -translate-x-1/2 whitespace-nowrap rounded-md bg-white py-2 px-4 text-xs text-gray-800 font-medium transition-opacity duration-300 border border-gray-300 shadow-[0px_12px_30px_-4px_rgba(16,24,40,0.08);]"
role="tooltip" id="light-tooltip">
<span
class="absolute -bottom-1.5 left-1/2 -z-10 h-3 w-3 border-b border-r border-gray-300 -translate-x-1/2 rotate-45 bg-white"></span>
This is a tooltip
</div>
</div>
<!-- dark tooltip -->
<div class="relative inline-block">
<button
class="bg-primary inline-flex rounded text-base font-semibold text-black whitespace-nowrap"
data-tooltip-target="dark-tooltip">
Dark Tooltip
</button>
<div
class="absolute bottom-full invisible left-1/2 z-20 mb-3 -translate-x-1/2 whitespace-nowrap rounded-md bg-gray-900 py-2 px-4 text-xs text-gray-50 font-medium transition-opacity duration-300 shadow-[0px_12px_30px_-4px_rgba(16,24,40,0.08);]"
role="tooltip" id="dark-tooltip">
<span
class="absolute -bottom-1.5 left-1/2 -z-10 h-3 w-3 -translate-x-1/2 rotate-45 bg-gray-900"></span>
This is a tooltip
</div>
</div>
</div>
Disable arrow
You can design tailwind ui tooltip without indicating arrow.
This is a tooltip
<div class="relative inline-block">
<button class="bg-primary inline-flex rounded text-base font-semibold text-black"
data-tooltip-target="default-tooltip">
Tooltip without arrow
</button>
<div
class="absolute bottom-full invisible left-1/2 z-20 mb-3 -translate-x-1/2 whitespace-nowrap border border-gray-300 rounded-full bg-white py-2 px-4 text-xs text-gray-800 font-medium transition-opacity duration-300 shadow-[0px_12px_30px_-4px_rgba(16,24,40,0.08);]"
role="tooltip" id="default-tooltip">
This is a tooltip
</div>
</div>
Detail Tooltip
Following tailwind tooltip works on hover with detailed text in it.
This is a tooltip
The tooltip, also known as infotip or hint, is a common graphical user...
<div class="relative inline-block">
<button class="bg-primary inline-flex rounded text-base font-semibold text-black"
data-tooltip-target="detail-tooltip">
Detail Tooltip
</button>
<div
class="w-64 absolute bottom-full invisible mb-2 left-1/2 z-20 border border-gray-300 -translate-x-1/2 rounded-2xl bg-white py-3 px-4 text-xs text-gray-800 font-medium transition-opacity duration-300 shadow-[0px_12px_30px_-4px_rgba(16,24,40,0.08);]"
role="tooltip" id="detail-tooltip">
<h5 class="text-sm text-gray-800 font-medium mb-1.5">This is a tooltip </h5>
<p class="text-xs text-gray-500 font-normal ">The tooltip, also known as infotip or
hint, is a common graphical user... </p>
<span
class="absolute -bottom-1.5 left-1/2 -z-10 h-3 w-3 border-b border-r border-gray-300 -translate-x-1/2 rotate-45 bg-white"></span>
</div>
</div>
Tooltip With Card
Following Tooltip in Tailwind CSS has a card as its content which shows product details on hover. You can use this for showing detailed information about products.
This is a tooltip
The tooltip, also known as infotip or hint, is a common graphical user...
This is a tooltip
The tooltip, also known as infotip or hint, is a common graphical user...
<div class="w-full flex justify-center gap-3 pt-48">
<div class="relative inline-block">
<button class="bg-primary inline-flex rounded text-base font-semibold text-black"
data-tooltip-target="tooltip-detail-image">
Tooltip With light card
</button>
<div
class="w-64 absolute bottom-full invisible mb-2 left-1/2 z-20 border border-gray-300 -translate-x-1/2 rounded-2xl bg-white py-3 px-3 text-xs text-gray-800 font-medium transition-opacity duration-300 shadow-[0px_12px_30px_-4px_rgba(16,24,40,0.08);]"
role="tooltip" id="tooltip-detail-image">
<h5 class="text-sm text-gray-800 font-medium mb-1.5">This is a tooltip </h5>
<p class="text-xs text-gray-500 font-normal mb-2 ">The tooltip, also known as infotip or
hint, is a common graphical user... </p>
<img src="https://pagedone.io/asset/uploads/1711965129.png" alt="image">
<span
class="absolute -bottom-1.5 left-1/2 -z-10 h-3 w-3 border-b border-r border-gray-300 -translate-x-1/2 rotate-45 bg-white"></span>
</div>
</div>
<div class="relative inline-block">
<button class="bg-primary inline-flex rounded text-base font-semibold text-black"
data-tooltip-target="tooltip-detail-image-dark">
Tooltip With dark card
</button>
<div
class="w-64 absolute bottom-full invisible mb-2 left-1/2 z-20 -translate-x-1/2 rounded-2xl bg-gray-900 py-3 px-3 text-xs text-gray-800 font-medium transition-opacity duration-300 shadow-[0px_12px_30px_-4px_rgba(16,24,40,0.08);]"
role="tooltip" id="tooltip-detail-image-dark">
<h5 class="text-sm text-gray-50 font-medium mb-1.5">This is a tooltip </h5>
<p class="text-xs text-gray-300 font-normal mb-2 ">The tooltip, also known as infotip or
hint, is a common graphical user... </p>
<img src="https://pagedone.io/asset/uploads/1711965129.png" alt="image">
<span
class="absolute -bottom-1.5 left-1/2 -z-10 h-3 w-3 -translate-x-1/2 rotate-45 bg-gray-900"></span>
</div>
</div>
</div>
Tooltip With Title And Image
Below is an example of tooltip which shows title and a small image. You can use this for showing product details in your show title and product image on tooltip.
This is a tooltip
<div class="relative inline-block">
<button class="bg-primary inline-flex rounded text-base font-semibold text-black"
data-tooltip-target="tooltip-title-image">
Tooltip With title and image
</button>
<div
class="w-64 absolute bottom-full invisible mb-2 left-1/2 z-20 border border-gray-300 -translate-x-1/2 rounded-2xl bg-white py-3 px-3 text-xs text-gray-800 font-medium transition-opacity duration-300 shadow-[0px_12px_30px_-4px_rgba(16,24,40,0.08);]"
role="tooltip" id="tooltip-title-image">
<h5 class="text-sm text-gray-800 font-medium mb-1.5">This is a tooltip </h5>
<img src="https://pagedone.io/asset/uploads/1711965129.png" alt="image">
<span
class="absolute -bottom-1.5 left-1/2 -z-10 h-3 w-3 border-b border-r border-gray-300 -translate-x-1/2 rotate-45 bg-white"></span>
</div>
</div>
Tooltip With Icon And Detail
Use following tooltip exmaple to display icon along with detailed information.
<div class="relative inline-block">
<button class="bg-primary inline-flex rounded text-base font-semibold text-black"
data-tooltip-target="tooltip-icon-detail">
Tooltip With icon and detail
</button>
<div
class="w-64 absolute bottom-full invisible mb-2 left-1/2 z-20 border flex gap-3 border-gray-300 -translate-x-1/2 rounded-2xl bg-white py-3 px-3 text-xs text-gray-800 font-medium transition-opacity duration-300 shadow-[0px_12px_30px_-4px_rgba(16,24,40,0.08);]"
role="tooltip" id="tooltip-icon-detail">
<span class="rounded-full p-2 w-8 h-8 bg-indigo-50 h-max">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
fill="none">
<path
d="M10.6669 4.66667C10.6669 6.13943 9.47296 7.33333 8.0002 7.33333C6.52744 7.33333 5.33353 6.13943 5.33353 4.66667C5.33353 3.19391 6.52744 2 8.0002 2C9.47296 2 10.6669 3.19391 10.6669 4.66667Z"
stroke="#4F46E5" stroke-width="1.2" />
<path
d="M8.0002 9.33333C6.10135 9.33333 4.43427 10.2016 3.48927 11.5092C2.98926 12.201 2.73926 12.547 3.11059 13.2735C3.48193 14 4.09913 14 5.33353 14H10.6669C11.9013 14 12.5185 14 12.8898 13.2735C13.2611 12.547 13.0111 12.201 12.5111 11.5092C11.5661 10.2016 9.89905 9.33333 8.0002 9.33333Z"
stroke="#4F46E5" stroke-width="1.2" />
</svg>
</span>
<div class="text">
<h5 class="text-sm text-gray-800 font-medium mb-1.5">This is a tooltip</h5>
<p class="text-xs text-gray-500 font-normal ">The tooltip, also known as infotip or
hint, is a common graphical user... </p>
</div>
<span
class="absolute -bottom-1.5 left-1/2 -z-10 h-3 w-3 border-b border-r border-gray-300 -translate-x-1/2 rotate-45 bg-white"></span>
</div>
</div>
Tailwind Hover Tooltip
This tailwind css tooltip works on hover over button where tooltip with detailed desciption can be shown.
This is a tooltip
The tooltip, also known as infotip or hint, is a common graphical user...
This is a tooltip
The tooltip, also known as infotip or hint, is a common graphical user...
This is a tooltip
The tooltip, also known as infotip or hint, is a common graphical user...
<div class="w-full flex justify-center gap-3 pb-14 pt-5">
<!-- Show tooltip on right -->
<div class="relative inline-block">
<button
class="bg-primary inline-flex rounded text-base font-semibold text-black whitespace-nowrap"
data-tooltip-target="detail-tooltip-right">
Tooltip on right
</button>
<div
class="w-64 absolute left-full top-1/2 z-20 ml-3 -translate-y-1/2 border border-gray-300 whitespace-nowrap rounded-lg bg-white py-2 px-4 text-xs text-gray-800 font-medium transition-opacity duration-300 shadow-[0px_-12px_30px_-4px_rgba(16,24,40,0.08)] invisible"
role="tooltip" id="detail-tooltip-right">
<span
class="absolute -left-1.5 top-1/2 -z-10 h-3 w-3 -translate-y-1/2 rotate-45 border-b border-l border-gray-300 bg-white"></span>
<h5 class="text-xs text-gray-800 font-medium mb-1.5">This is a tooltip</h5>
<p class="text-xs text-gray-500 font-normal whitespace-normal">The tooltip, also known as
infotip or hint, is a common graphical user... </p>
</div>
</div>
<!-- Show tooltip on bottom -->
<div class="relative inline-block">
<button
class="bg-primary inline-flex rounded text-base font-semibold text-black whitespace-nowrap"
data-tooltip-target="detail-tooltip-bottom">
Tooltip on bottom
</button>
<div
class="w-64 absolute top-full left-1/2 z-20 mt-3 -translate-x-1/2 whitespace-nowrap rounded-lg border border-gray-300 bg-white py-2 px-4 text-xs text-gray-800 font-medium transition-opacity duration-300 shadow-[0px_-12px_30px_-4px_rgba(16,24,40,0.08)] invisible"
role="tooltip" id="detail-tooltip-bottom">
<span
class="absolute -top-1.5 left-1/2 -z-10 h-3 w-3 -translate-x-1/2 rotate-45 border-t border-l border-gray-300 bg-white"></span>
<h5 class="text-xs text-gray-800 font-medium mb-1.5">This is a tooltip</h5>
<p class="text-xs text-gray-500 font-normal whitespace-normal">The tooltip, also known as
infotip or hint, is a common graphical user... </p>
</div>
</div>
<!-- Show tooltip on left -->
<div class="relative inline-block">
<button
class="bg-primary inline-flex rounded text-base font-semibold text-black whitespace-nowrap"
data-tooltip-target="detail-tooltip-left">
Tooltip on left
</button>
<div
class="w-64 absolute right-full top-1/2 z-20 mr-3 -translate-y-1/2 whitespace-nowrap rounded-lg border border-gray-300 bg-white py-3 px-4 text-xs text-gray-800 font-medium transition-opacity duration-300 shadow-[12px_0px_30px_-4px_rgba(16,24,40,0.08)] invisible"
role="tooltip" id="detail-tooltip-left">
<span
class="absolute -right-1.5 top-1/2 -z-10 h-3 w-3 -translate-y-1/2 rotate-45 rounded-sm bg-white border-r border-t border-gray-300"></span>
<h5 class="text-xs text-gray-800 font-medium mb-1.5">This is a tooltip</h5>
<p class="text-xs text-gray-500 font-normal whitespace-normal">The tooltip, also known as
infotip or hint, is a common graphical user... </p>
</div>
</div>
</div>