divtooltip-darkintermediate

Dark Tooltip

A dark tooltip that appears on hover with a small arrow pointer, using CSS-only group hover.

Preview
<div class="flex justify-center py-12">
  <div class="relative group">
    <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-300 transition-colors">Hover me</button>
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-gray-900 text-white text-xs rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 whitespace-nowrap">
      This is a tooltip
      <div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
    </div>
  </div>
</div>

Color Breakdown

Tooltip Background

bg-gray-900

#111827

Tooltip Text

text-white

#ffffff

Arrow

border-t-gray-900

#111827

Trigger Background

bg-gray-200

#e5e7eb

Use Cases

Icon button labelsAbbreviation explanationsFeature hints

Browser Support

All modern browsers.

Related Recipes

Gradient Button

button - beginner

Ghost Button

button - beginner

Animated Button Hover

button - intermediate

Dark Hero Section

section - intermediate

Dark Footer

section - beginner

Dark Navbar

nav - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I position the tooltip below instead?▼
Change bottom-full to top-full, mb-2 to mt-2, and border-t-gray-900 to border-b-gray-900 with the arrow at bottom-full instead of top-full.