CSS Tooltip Generator
Generate CSS tooltips with arrow positioning, animations, colors, and sizes.
What is a CSS Tooltip?
A CSS tooltip is a small pop-up box that appears when a user hovers over an element, providing extra information or context without cluttering the page. Pure CSS tooltips rely on the :hover pseudo-class and the ::after pseudo-element, so no JavaScript is required to show or hide them.
The generated markup has a relative trigger element with the class .tooltip and a nested bubble with the class .tooltip-text. The bubble is absolutely positioned on the top, bottom, left, or right of the trigger, and a small arrow is drawn with an ::after element using transparent borders of a single solid color. That border trick is what produces a crisp triangular pointer that can sit on any edge.
Four entrance animations are available: none shows the tooltip immediately, fade animates opacity, slide glides the bubble in from the edge it is anchored to (a direction-aware 10 pixel offset), and scale grows the bubble from 0.8 to full size. Every animation runs over 0.2 seconds with an ease-out curve.
Appearance is fully customizable. Sliders control the arrow size, border radius, font size, and width, while color pickers set the background and text colors and text inputs set the trigger and tooltip labels. The output includes the .tooltip, .tooltip-text, ::after, and :hover rules, and six presets let you apply a complete look in one click.
Key Concepts
- Trigger (.tooltip) — the relative element you hover.
- Tooltip text (.tooltip-text) — the absolutely positioned bubble.
- Arrow (::after) — a border-color triangle that points at the trigger.
- Position — top, bottom, left, or right.
- Animation — none, fade, slide, or scale over 0.2 seconds.
- Presets — default, dark, success, danger, info, and rounded.
How to Use
- Choose a position — Select top, bottom, left, or right to place the tooltip relative to the trigger.
- Pick an animation — Choose none, fade, slide (direction-aware), or scale.
- Adjust size and colors — Move the sliders for arrow size, border radius, font size, and width, and set background and text colors.
- Set the text — Enter the trigger label and the tooltip message; the preview updates live.
- Copy the CSS — Click Copy CSS and apply the
.tooltipclass to your markup with a nested.tooltip-textspan.
Settings Reference
| Setting | Options / Range | Default | Effect |
|---|---|---|---|
| Position | top / bottom / left / right | top | Placement of the bubble. |
| Animation | none / fade / slide / scale | fade | Entrance effect over 0.2s ease-out. |
| Arrow size | 3–16 | 6 | Triangle size in pixels. |
| Border radius | 0–20 | 6 | Corner rounding of the bubble. |
| Font size | 10–24 | 14 | Tooltip text size in pixels. |
| Width | 100–400 | 200 | Applied as both min-width and max-width. |
| Background | color / hex | #1f2937 | Bubble and arrow color. |
| Text color | color / hex | #ffffff | Label color inside the bubble. |
Built-in Presets
| Preset | Position | Animation | Background |
|---|---|---|---|
| Default | top | fade | #1f2937 |
| Dark | top | fade | #111827 |
| Success | bottom | slide | #065f46 |
| Danger | top | scale | #991b1b |
| Info | right | fade | #1e3a5f |
| Rounded | bottom | fade | #5b21b6 |
Worked Examples
- Default preset — top position, fade animation, arrow 6, radius 6, font 14, width 200, background
#1f2937, white text. - Dark preset — identical to default but with a darker background of
#111827and near-white text. - Success preset — bottom position with a slide animation and a green background of
#065f46. - Danger preset — top position with a scale animation and a red background of
#991b1b. - Info preset — right position with a fade animation and a blue background of
#1e3a5f. - Rounded preset — bottom position, fade animation, border radius 14, arrow size 8, and a purple background of
#5b21b6. - Slide from the top — the bubble animates from
translateY(10px)totranslateY(0), gliding in from the anchored edge.
Tips and Common Mistakes
- Plain text only — the
contentproperty does not render HTML, so markup in the text will show literally. - Match the arrow to the background — the triangle is a border-color shape, so a mismatched color looks detached.
- Keep the trigger relative — the generated
.tooltipclass setsposition: relative, which the arrow depends on. - Watch the contrast — pick a text color that stands out against the background, especially for light backgrounds.
- Mind the width — the width value is both a minimum and a maximum, so long messages wrap onto multiple lines.
- Hover only — because the tooltip uses
:hover, it may not appear on touch-only devices without extra handling.
Common Use Cases
Tooltips are a compact way to add context without crowding an interface. Here are some of the most common places they help.
- Form field hints — explain the expected input on hover.
- Icon explanations — label buttons and controls that use only an icon.
- Abbreviations and jargon — define terms without leaving the page.
- Dashboard metrics — describe what a number or chart represents.
- Disabled controls — explain why an action is currently unavailable.
- Onboarding — guide new users to key features.
Frequently Asked Questions
Do I need JavaScript for this tooltip?
No. The generated CSS uses only the :hover pseudo-class and the ::after pseudo-element, so the tooltip shows and hides without any scripting.
Can I use HTML inside the tooltip?
No. The content property accepts plain text only. Rendering HTML inside a tooltip requires additional markup and JavaScript.
Can I change the animation speed?
The generator writes a fixed 0.2s ease-out duration, but you can edit that value in the copied CSS to make the entrance faster or slower.
Why must the arrow color match the background?
The arrow is a border-color triangle rather than an image, so it only blends in when its color matches the tooltip background.
What does the width slider control?
It sets both the minimum and maximum width in pixels, which determines how wide the bubble is and where its text wraps.
Does the tooltip work on mobile?
It is hover-based, so on touch-only devices it generally will not appear. Provide a tap-based alternative for mobile users.
What are the built-in presets?
Default, Dark, Success, Danger, Info, and Rounded. Each preset sets the position, animation, size, and colors in a single click.
Is my customization stored anywhere?
No. Everything is generated in your browser and nothing is uploaded, saved, or shared.