Tailwind CSS Tooltips Components
Tailwind CSS Tooltips by TailGrids, a great UI element to guide user to take actions. A tooltip component is essentially a tiny pop-up box that comes up when users move around the mouse pointer over a specific element on a website. When the mouse pointer hovers over a specific element on any part of a website, the pop-up box that appears is called a tooltip component. Tooltips Tailwind CSS components are high in demand because of the love and expertise that has gone into crafting them. These Tailwind sections are the perfect UI element to allow users to take specific actions on your website. At TailGrids, you can choose from three different tooltips styles without spending a single penny on them. Moreover, these components are based on Tailwind CSS, so you can rest assured that they will serve their purpose without any technical failure or hassles.
Tooltip Style 1
FREE
FREE
Tooltip Style 1<div class="container py-12">
<div class="-mx-4 flex flex-wrap justify-center">
<div class="w-full px-4 sm:w-1/2 lg:w-1/4">
<div class="mb-14">
<div class="group relative inline-block">
<button
class="inline-flex rounded bg-primary py-2 px-[18px] text-base font-semibold text-white"
>
Tooltip on top
</button>
<div
class="absolute bottom-full left-1/2 z-20 mb-3 -translate-x-1/2 whitespace-nowrap rounded bg-black py-[6px] px-4 text-sm font-semibold text-white opacity-0 group-hover:opacity-100"
>
<span
class="absolute bottom-[-3px] left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm bg-black"
></span>
Tooltip Text
</div>
</div>
</div>
</div>
<div class="w-full px-4 sm:w-1/2 lg:w-1/4">
<div class="mb-14">
<div class="group relative inline-block">
<button
class="inline-flex rounded bg-primary py-2 px-[18px] text-base font-semibold text-white"
>
Tooltip on right
</button>
<div
class="absolute left-full top-1/2 z-20 ml-3 -translate-y-1/2 whitespace-nowrap rounded bg-black py-[6px] px-4 text-sm font-semibold text-white opacity-0 group-hover:opacity-100"
>
<span
class="absolute left-[-3px] top-1/2 -z-10 h-2 w-2 -translate-y-1/2 rotate-45 rounded-sm bg-black"
></span>
Tooltip Text
</div>
</div>
</div>
</div>
<div class="w-full px-4 sm:w-1/2 lg:w-1/4">
<div class="mb-14">
<div class="group relative inline-block">
<button
class="inline-flex rounded bg-primary py-2 px-[18px] text-base font-semibold text-white"
>
Tooltip on bottom
</button>
<div
class="absolute top-full left-1/2 z-20 mt-3 -translate-x-1/2 whitespace-nowrap rounded bg-black py-[6px] px-4 text-sm font-semibold text-white opacity-0 group-hover:opacity-100"
>
<span
class="absolute top-[-3px] left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm bg-black"
></span>
Tooltip Text
</div>
</div>
</div>
</div>
<div class="w-full px-4 sm:w-1/2 lg:w-1/4">
<div class="mb-14 text-right sm:text-left">
<div class="group relative inline-block">
<button
class="inline-flex rounded bg-primary py-2 px-[18px] text-base font-semibold text-white"
>
Tooltip on left
</button>
<div
class="absolute right-full top-1/2 z-20 mr-3 -translate-y-1/2 whitespace-nowrap rounded bg-black py-[6px] px-4 text-sm font-semibold text-white opacity-0 group-hover:opacity-100"
>
<span
class="absolute right-[-3px] top-1/2 -z-10 h-2 w-2 -translate-y-1/2 rotate-45 rounded-sm bg-black"
></span>
Tooltip Text
</div>
</div>
</div>
</div>
</div>
</div>
Tooltip Style 2
FREE
FREE
Tooltip Style 2<div class="container py-12">
<div class="-mx-4 flex flex-wrap justify-center">
<div class="w-full px-4 sm:w-1/2 lg:w-1/4">
<div class="mb-14">
<div class="group relative inline-block">
<button
class="inline-flex rounded bg-primary py-2 px-[18px] text-base font-semibold text-white"
>
Tooltip on top
</button>
<div
class="absolute bottom-full left-1/2 z-20 mb-3 -translate-x-1/2 whitespace-nowrap rounded border border-light bg-white py-[6px] px-4 text-sm font-semibold text-body-color opacity-0 group-hover:opacity-100"
>
<span
class="absolute -bottom-1 left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-l-sm border-b border-r border-light bg-white"
></span>
Tooltip Text
</div>
</div>
</div>
</div>
<div class="w-full px-4 sm:w-1/2 lg:w-1/4">
<div class="mb-14">
<div class="group relative inline-block">
<button
class="inline-flex rounded bg-primary py-2 px-[18px] text-base font-semibold text-white"
>
Tooltip on right
</button>
<div
class="absolute left-full top-1/2 z-20 ml-3 -translate-y-1/2 whitespace-nowrap rounded border border-light bg-white py-[6px] px-4 text-sm font-semibold text-body-color opacity-0 group-hover:opacity-100"
>
<span
class="absolute -left-1 top-1/2 -z-10 h-2 w-2 -translate-y-1/2 rotate-45 rounded-r-sm border-b border-l border-light bg-white"
></span>
Tooltip Text
</div>
</div>
</div>
</div>
<div class="w-full px-4 sm:w-1/2 lg:w-1/4">
<div class="mb-14">
<div class="group relative inline-block">
<button
class="inline-flex rounded bg-primary py-2 px-[18px] text-base font-semibold text-white"
>
Tooltip on bottom
</button>
<div
class="absolute top-full left-1/2 z-20 mt-3 -translate-x-1/2 whitespace-nowrap rounded border border-light bg-white py-[6px] px-4 text-sm font-semibold text-body-color opacity-0 group-hover:opacity-100"
>
<span
class="absolute -top-1 left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm border-t border-l border-light bg-white"
></span>
Tooltip Text
</div>
</div>
</div>
</div>
<div class="w-full px-4 sm:w-1/2 lg:w-1/4">
<div class="mb-14 text-right sm:text-left">
<div class="group relative inline-block">
<button
class="inline-flex rounded bg-primary py-2 px-[18px] text-base font-semibold text-white"
>
Tooltip on left
</button>
<div
class="absolute right-full top-1/2 z-20 mr-3 -translate-y-1/2 whitespace-nowrap rounded border border-light bg-white py-[6px] px-4 text-sm font-semibold text-body-color opacity-0 group-hover:opacity-100"
>
<span
class="absolute -right-1 top-1/2 -z-10 h-2 w-2 -translate-y-1/2 rotate-45 rounded-sm border-t border-r border-light bg-white"
></span>
Tooltip Text
</div>
</div>
</div>
</div>
</div>
</div>
Tooltip Style 3
FREE
FREE
Tooltip Style 3<div class="container py-12">
<div class="-mx-4 flex flex-wrap justify-center">
<div class="w-full px-4 sm:w-1/2 lg:w-1/4">
<div class="mb-14">
<div class="group relative inline-block">
<button
class="inline-flex rounded bg-black py-2 px-[18px] text-base font-semibold text-white"
>
Tooltip on top
</button>
<div
class="absolute bottom-full left-1/2 z-20 mb-3 -translate-x-1/2 whitespace-nowrap rounded bg-primary py-[6px] px-4 text-sm font-semibold text-white opacity-0 group-hover:opacity-100"
>
<span
class="absolute bottom-[-3px] left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm bg-primary"
></span>
Tooltip Text
</div>
</div>
</div>
</div>
<div class="w-full px-4 sm:w-1/2 lg:w-1/4">
<div class="mb-14">
<div class="group relative inline-block">
<button
class="inline-flex rounded bg-black py-2 px-[18px] text-base font-semibold text-white"
>
Tooltip on right
</button>
<div
class="absolute left-full top-1/2 z-20 ml-3 -translate-y-1/2 whitespace-nowrap rounded bg-primary py-[6px] px-4 text-sm font-semibold text-white opacity-0 group-hover:opacity-100"
>
<span
class="absolute left-[-3px] top-1/2 -z-10 h-2 w-2 -translate-y-1/2 rotate-45 rounded-sm bg-primary"
></span>
Tooltip Text
</div>
</div>
</div>
</div>
<div class="w-full px-4 sm:w-1/2 lg:w-1/4">
<div class="mb-14">
<div class="group relative inline-block">
<button
class="inline-flex rounded bg-black py-2 px-[18px] text-base font-semibold text-white"
>
Tooltip on bottom
</button>
<div
class="absolute top-full left-1/2 z-20 mt-3 -translate-x-1/2 whitespace-nowrap rounded bg-primary py-[6px] px-4 text-sm font-semibold text-white opacity-0 group-hover:opacity-100"
>
<span
class="absolute top-[-3px] left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm bg-primary"
></span>
Tooltip Text
</div>
</div>
</div>
</div>
<div class="w-full px-4 sm:w-1/2 lg:w-1/4">
<div class="mb-14 text-right sm:text-left">
<div class="group relative inline-block">
<button
class="inline-flex rounded bg-black py-2 px-[18px] text-base font-semibold text-white"
>
Tooltip on left
</button>
<div
class="absolute right-full top-1/2 z-20 mr-3 -translate-y-1/2 whitespace-nowrap rounded bg-primary py-[6px] px-4 text-sm font-semibold text-white opacity-0 group-hover:opacity-100"
>
<span
class="absolute right-[-3px] top-1/2 -z-10 h-2 w-2 -translate-y-1/2 rotate-45 rounded-sm bg-primary"
></span>
Tooltip Text
</div>
</div>
</div>
</div>
</div>
</div>