Components
Tailwind CSS Tooltips - Madhuranjan UI
Discover a collection of modern and flexible Tailwind CSS tooltip components. Each one is responsive, theme-aware, and perfect for dashboards, forms, or UI enhancements across your application.
Default Tooltip
A classic tooltip for guiding users with helpful inline messages.
More info about this icon
1<div class="flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
2 <div class="relative group">
3 <svg class="w-6 h-6 text-gray-600 dark:text-gray-300 cursor-pointer" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
4 <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M12 20a8 8 0 100-16 8 8 0 000 16z"/>
5 </svg>
6 <!-- Tooltip -->
7 <div class="absolute left-full top-1/2 -translate-y-1/2 ml-3 w-max px-3 py-1.5 bg-gray-800 text-white text-xs rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition">
8 More info about this icon
9 </div>
10 </div>Dark & Light Mode Tooltip
Easily adaptable to both themes, these tooltips remain visible and accessible in any environment.
This tooltip is styled for light theme, with soft shadows and light background.
This tooltip is built for dark mode, with subtle highlights and soft contrast.
1<div class="flex justify-center items-center">
2 <div class="flex items-center justify-center bg-white p-6">
3 <div class="group relative">
4 <button class="rounded-lg bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700">Light</button>
5 <!-- Light Tooltip -->
6 <div class="pointer-events-none absolute bottom-full left-1/2 mb-2 w-max max-w-xs -translate-x-1/2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm text-gray-800 opacity-0 shadow-md transition group-hover:opacity-100">This tooltip is styled for light theme, with soft shadows and light background.</div>
7 </div>
8 </div>
9
10 <div class="flex items-center justify-center p-6">Tooltip on All Sides (Single Button)
Showcase a tooltip appearing on top, right, bottom, and left with a single trigger element.
Hover me
Tooltip Top
Tooltip Bottom
Tooltip Left
Tooltip Right
1<div class="flex min-h-screen items-center justify-center bg-gray-100 p-6 dark:bg-gray-900">
2 <div class="group relative">
3 <!-- Center Trigger -->
4 <div class="flex h-10 w-24 cursor-pointer items-center justify-center rounded-xl bg-blue-600 text-sm font-medium text-white transition hover:bg-blue-700">Hover me</div>
5
6 <!-- Top Tooltip -->
7 <div class="pointer-events-none absolute bottom-full left-1/2 mb-2 w-full -translate-x-1/2 opacity-0 transition group-hover:opacity-100">
8 <div class="rounded-md bg-gray-900 px-3 py-1.5 text-xs text-white shadow-md">Tooltip Top</div>
9 </div>
10Tooltip on All Sides (Four Buttons)
Demonstrate directional tooltips using four distinct button placements. Ideal for showing position control in UI previews.
I'm above the button — full width text goes here.
Tooltip below with full width text aligned to button.
I'm on the right side with full width.
I'm on the left side with full width.
1 <div class="flex min-h-44 w-full items-center justify-center bg-gray-100 p-6 dark:bg-gray-900">
2 <div class="flex w-full flex-wrap items-center justify-center gap-4">
3 <div class="group relative flex flex-col items-start">
4 <div class="relative w-full">
5 <div class="pointer-events-none absolute bottom-full left-0 mb-2 w-full opacity-0 transition group-hover:opacity-100">
6 <div class="w-full rounded-md bg-gray-900 px-4 py-2 text-xs text-white shadow-lg">I'm above the button — full width text goes here.</div>
7 </div>
8 <button class="w-full rounded-lg bg-blue-600 px-4 py-2 text-left text-white transition hover:bg-blue-700">Tooltip Top</button>
9 </div>
10 </div>