How do I add an arrow to a tooltip?

Tooltip arrows use the CSS border triangle trick on a pseudo-element. A small transparent-bordered element with one colored border creates a triangle that points from the tooltip toward the trigger element.

CSS Tooltip Generator — Free Tool

What Is the CSS Tooltip Generator?

Create pure CSS tooltips with customizable position, color, arrow direction, and animation. Generate tooltip styles without JavaScript dependencies.

Why Use This Tool?

Tooltips provide contextual information on hover or focus. This tool generates pure CSS tooltip implementations with proper positioning, arrows, and smooth fade/slide animations.

How to Use This CSS Tooltip Generator

Enter your tooltip text — Type the message you want to display when users hover over the trigger element.
Choose the position — Select top, bottom, left, or right placement relative to the trigger element.
Style the tooltip — Customize background color, text color, font size, padding, border-radius, and arrow size.
Set the trigger behavior — Configure whether the tooltip appears on hover, focus, or both (hover+focus for accessibility).
Copy the CSS — Grab the complete tooltip CSS using the pseudo-element technique — no JavaScript needed.

Tips and Best Practices

→ Always include the focus trigger. Tooltips that only appear on hover are inaccessible to keyboard users. Add :focus and :focus-within alongside :hover.
→ Keep tooltip text short. Tooltips are for brief supplementary information — a few words to a short sentence. If you need more, use a popover or expandable section instead.
→ Add a small delay before showing. A 200–400ms delay prevents tooltips from flashing as users move the cursor across the page. CSS can handle this with transition-delay.
→ Use aria-label for screen readers. CSS-only tooltips are invisible to screen readers. Add aria-label or title attributes to ensure the information is accessible.

Frequently Asked Questions

Are CSS-only tooltips accessible?

Basic CSS tooltips using :hover are not accessible to keyboard users or screen readers. For production use, add aria-label or aria-describedby attributes and ensure tooltips are also triggered on :focus.

How do I position tooltips correctly?

The tool generates position: absolute tooltips relative to a position: relative parent. Choose top, bottom, left, or right placement with automatic arrow alignment.

Should I use CSS tooltips or a JavaScript library?

CSS tooltips are fine for simple, static hints. For complex behaviors like dynamic positioning, overflow detection, or interactive content, use a library like Tippy.js or Floating UI.

How do CSS tooltips work?+

CSS tooltips use pseudo-elements (::before or ::after) with the content property to display text on hover. The tooltip content is stored in a data attribute (data-tooltip) and positioned absolutely relative to the parent element. The arrow is typically a CSS border triangle on another pseudo-element.

Are CSS-only tooltips accessible?+

Partially. CSS tooltips appear on hover and can be extended to appear on focus, but they're not announced by screen readers since pseudo-element content isn't reliably read. For full accessibility, complement CSS tooltips with aria-label, title attributes, or use the native Popover API for critical information.

When should I use a tooltip vs a popover?+

Use tooltips for brief, supplementary information that fits in one line or short sentence. Use popovers for longer content, interactive elements, or information that users need to read and reference. Tooltips disappear on mouse-out; popovers typically stay open until dismissed.

📖 Learn More

Built by Derek Giordano · Part of Ultimate Design Tools

Related Tools