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.

<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.

<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.

<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.

<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>

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

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. 

<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.

<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.

<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>

Figma

You can also find this component in Figma. Check the Pagedone Figma Design System.

Preview Buy Now
image

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More