Create Tooltips Using CSS Only

I often see people reaching for tooltip libraries even for the simplest use cases. The truth is—you can achieve the same functionality with just a few lines of CSS. Of course, this approach comes with both pros and cons, and I'll cover them in detail below.

Demo

Position Controls

Size Controls

Content Alignment Controls

Implementation

Here's how to implement it. We'll build the utility using a data attribute. You can use any attribute name, but in this case, I'll go with data-tooltip.

Wherever you want a tooltip, just add data-tooltip="some text". The rest is handled purely with CSS.

That's it. This is all the CSS you need for basic tooltip functionality. Add the data-tooltip attribute, and your tooltip is ready.

Limitations of This Approach

As I mentioned earlier, for most use cases this works perfectly fine. But sometimes you'll need a library for more advanced scenarios. Here are a few comparisons:

Feature	Libraries	CSS-only approach
Portal (escape overflow/stacking context)	✅	❌
Collision detection + flip	✅	❌
Basic placement (top/bottom/left/right)	✅	✅
Content alignment (start/center/end)	✅	✅
Size variants (sm/lg)	✅	✅
Theme variants (light/primary/secondary/…)	✅	✅
Animation speed control (fast/slow)	✅	✅
Rich/HTML content	✅	❌
Interactive content inside tooltip	✅	❌
Follow cursor	✅	❌
Keyboard focus + ARIA defaults	✅	⚠️ partial
Touch support	✅	⚠️ limited
Zero JS / tiny bundle impact	❌	✅

Advanced styles

Position Modifiers

data-tooltip-left
data-tooltip-right
data-tooltip-top

Size Modifiers

data-tooltip-sm
data-tooltip-lg

Theme Modifiers

data-tooltip-light
data-tooltip-primary
data-tooltip-secondary
data-tooltip-destructive

Animation Speed Modifiers

data-tooltip-fast
data-tooltip-slow

Content Alignment

data-tooltip-left-align
data-tooltip-right-align