CSS Tooltip Generator

Need a neat hover hint for your buttons and links? Our free CSS Tooltip Generator builds a pure-CSS tooltip in seconds — type your text, pick a position and colours, preview it live, then copy the code.

Tooltip text: Position: Background colour: Text colour: Font size (px): Padding (px): Corner radius (px):

Hover me

Your CSS

How to Use

Type your tooltip text.
Choose where the tooltip appears — top, bottom, left or right.
Pick background and text colours, then adjust size, padding and corners.
Hover the preview to see it live, then copy the CSS.

Key Features

Generates a pure-CSS tooltip — no JavaScript needed on your site.
Four positions with a live hover preview.
Custom colours, font size, padding and corner radius.
Keyboard accessible — the tooltip also shows on focus.
One-click copy — free with no sign-up.

FAQs

How do I use the CSS on my site?

Copy the CSS into your stylesheet, add class=”ctt-tip” to any element, and edit the content text in the CSS to change what the tooltip says.

Will the tooltip work on mobile?

Tooltips rely on hover, which touch screens lack. They work best as progressive enhancement — keep the key information visible without hovering.

Can I use my own class name?

Yes. Rename .ctt-tip throughout the generated CSS to any class you prefer.

Do I need an account to use this tool?

No. Like every tool on ToolsFreeHub, the CSS Tooltip Generator is free and works without signing up.