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 2
FREE
FREE
Tooltip Style 2<div class="container mx-auto 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="bg-primary inline-flex rounded py-2 px-[18px] text-base font-semibold text-white"
>
Tooltip on top
</button>
<div
class="border-light text-body-color absolute bottom-full left-1/2 z-20 mb-3 -translate-x-1/2 whitespace-nowrap rounded border bg-white py-[6px] px-4 text-sm font-semibold opacity-0 group-hover:opacity-100"
>
<span
class="border-light 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 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="bg-primary inline-flex rounded py-2 px-[18px] text-base font-semibold text-white"
>
Tooltip on right
</button>
<div
class="border-light text-body-color absolute left-full top-1/2 z-20 ml-3 -translate-y-1/2 whitespace-nowrap rounded border bg-white py-[6px] px-4 text-sm font-semibold opacity-0 group-hover:opacity-100"
>
<span
class="border-light 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 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="bg-primary inline-flex rounded py-2 px-[18px] text-base font-semibold text-white"
>
Tooltip on bottom
</button>
<div
class="border-light text-body-color absolute top-full left-1/2 z-20 mt-3 -translate-x-1/2 whitespace-nowrap rounded border bg-white py-[6px] px-4 text-sm font-semibold opacity-0 group-hover:opacity-100"
>
<span
class="border-light absolute -top-1 left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm border-t border-l 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="bg-primary inline-flex rounded py-2 px-[18px] text-base font-semibold text-white"
>
Tooltip on left
</button>
<div
class="border-light text-body-color absolute right-full top-1/2 z-20 mr-3 -translate-y-1/2 whitespace-nowrap rounded border bg-white py-[6px] px-4 text-sm font-semibold opacity-0 group-hover:opacity-100"
>
<span
class="border-light absolute -right-1 top-1/2 -z-10 h-2 w-2 -translate-y-1/2 rotate-45 rounded-sm border-t border-r bg-white"
></span>
Tooltip Text
</div>
</div>
</div>
</div>
</div>
</div>
Tooltip Style 1
FREE
FREE
Tooltip Style 1<div class="container mx-auto 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="bg-primary inline-flex rounded 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="bg-primary inline-flex rounded 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="bg-primary inline-flex rounded 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="bg-primary inline-flex rounded 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 3
FREE
FREE
Tooltip Style 3<div class="container mx-auto 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="bg-primary absolute bottom-full left-1/2 z-20 mb-3 -translate-x-1/2 whitespace-nowrap rounded py-[6px] px-4 text-sm font-semibold text-white opacity-0 group-hover:opacity-100"
>
<span
class="bg-primary absolute bottom-[-3px] left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm"
></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="bg-primary absolute left-full top-1/2 z-20 ml-3 -translate-y-1/2 whitespace-nowrap rounded py-[6px] px-4 text-sm font-semibold text-white opacity-0 group-hover:opacity-100"
>
<span
class="bg-primary absolute left-[-3px] top-1/2 -z-10 h-2 w-2 -translate-y-1/2 rotate-45 rounded-sm"
></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="bg-primary absolute top-full left-1/2 z-20 mt-3 -translate-x-1/2 whitespace-nowrap rounded py-[6px] px-4 text-sm font-semibold text-white opacity-0 group-hover:opacity-100"
>
<span
class="bg-primary absolute top-[-3px] left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm"
></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="bg-primary absolute right-full top-1/2 z-20 mr-3 -translate-y-1/2 whitespace-nowrap rounded py-[6px] px-4 text-sm font-semibold text-white opacity-0 group-hover:opacity-100"
>
<span
class="bg-primary absolute right-[-3px] top-1/2 -z-10 h-2 w-2 -translate-y-1/2 rotate-45 rounded-sm"
></span>
Tooltip Text
</div>
</div>
</div>
</div>
</div>
</div>