CSS Tooltip Generator
This generator helps you design and learn the art of CSS tooltips, saving you the time and effort of building them from scratch. Tooltips are an essential UI element, offering users helpful context or information before they click a link or interact with an element.
We’ve optimized this generator to be more flexible: the tooltip position is no longer hard-coded into the CSS. Instead, positions are now defined by the data-direction attribute, while the content lives within the data-tooltip attribute. This approach allows you to deploy multiple tooltips across a single page, each with its own unique text and placement.
CSS Tooltip Generator
About CSS Tooltip Generator
The CSS tooltip generator is a free online webtool that helps you create tooltips for your web content using CSS. Tooltips are small, informational pop-up boxes that appear when a user hovers their mouse over an element on a web page, such as a link or an image. These tooltips can display additional information or descriptions about the element, providing a better user experience and making your website more informative.
This CSS tooltip generator allows you to customize the appearance and behavior of the tooltips. You can set options such as the tooltip's position, size and color. Additionally, you will be able to see any changes made as it automatically updates the preview tooltip.
Using a CSS tooltip generator can be a convenient way to create tooltips without having to write the CSS and JavaScript code from scratch. The generator provides a user-friendly interface for designing tooltips, and they generate the necessary CSS and code that you can easily integrate into your web pages. This can save you time and effort in web development and enhance the interactivity of your website.
Frequently Asked Questions
What is a CSS tooltip?
A CSS tooltip is a small pop-up box that appears when a user hovers their mouse over an element on a web page.
It is used to display additional information, hints, or descriptions about that element without requiring a click or page navigation.
Unlike browser-native tooltips triggered by the HTML title attribute, CSS tooltips are fully styled using CSS and can be customised for colour, size, position, animation, and shape.
How do I create a CSS tooltip without JavaScript?
A pure CSS tooltip uses the ::before or ::after pseudo-elements to inject the tooltip content, and the :hover pseudo-class to show and hide it.
The tooltip text is typically stored in a data-tooltip attribute on the trigger element and passed into the CSS using content: attr(data-tooltip);.
The trigger element itself needs position: relative so the absolutely positioned tooltip stays anchored to it.
No JavaScript is required for basic show/hide behaviour.
How do I position a CSS tooltip above, below, left, or right of an element?
Tooltip position is controlled by the top, bottom, left, and right properties on the ::after pseudo-element, combined with transform: translateX(-50%) or translateY(-50%) to centre it relative to the trigger.
For a tooltip above the element, set bottom: 100% and left: 50% with a horizontal translate.
For one below, use top: 100%. For left or right placements, anchor to the relevant side and use a vertical translate.
The arrow is created using CSS border tricks on the same pseudo-element.
How do I add an arrow to a CSS tooltip?
The arrow is created using a CSS border trick on a ::before pseudo-element (or a second pseudo-element alongside the tooltip box).
Set the element to width: 0; height: 0; and apply borders on three sides - making three of the four borders transparent and one the colour of the tooltip.
The visible border forms the triangular arrow. Its position is adjusted with top, bottom, left, or right to point toward the trigger element from whichever side the tooltip appears on.
How do I animate a CSS tooltip?
Tooltip animations are typically done with CSS transition or @keyframes.
The simplest approach is to start the tooltip at opacity: 0 and visibility: hidden, then transition to opacity: 1 and visibility: visible on :hover using transition: opacity 0.2s ease;.
For a slide-in effect, combine the opacity transition with a small translateY shift - start slightly offset and animate to the final position on hover.
Using visibility alongside opacity (rather than display: none) is important because display cannot be transitioned.
What is the difference between a CSS tooltip and the HTML title attribute?
The HTML title attribute produces a browser-native tooltip - a plain text box styled and positioned entirely by the browser with no customisation available.
It also has accessibility limitations and behaves inconsistently across browsers and devices, and does not appear at all on touch screens.
A CSS tooltip is fully under your control: you can style its colours, fonts, size, shape, animation, and position. It is also more accessible when implemented correctly using ARIA attributes.
The trade-off is that a CSS tooltip requires additional markup and CSS, whereas title requires nothing more than an attribute.
How do I make a CSS tooltip accessible?
For accessibility, add role="tooltip" to the tooltip element and link it to the trigger using aria-describedby pointing at the tooltip's id.
Ensure the tooltip is also keyboard-accessible - it should appear on :focus as well as :hover so keyboard-only users can trigger it by tabbing to the element.
Avoid putting essential information only inside a tooltip; it should supplement content rather than be the only way to access it, since tooltips are not available on touch devices without extra interaction.
How do I show a tooltip on click instead of hover?
Pure CSS can achieve a click-triggered tooltip using a hidden checkbox and the :checked pseudo-class, though this approach requires extra markup.
The more practical solution is a small JavaScript toggle: add a click event listener to the trigger element that toggles a CSS class on the tooltip, and use that class in your CSS to control visibility and opacity.
This pattern also works well for touch devices where hover events are unreliable.
How do I use multiple tooltips on the same page?
The cleanest approach is to store each tooltip's text in a data-tooltip attribute on the trigger element and use content: attr(data-tooltip); in your CSS pseudo-element.
Similarly, storing the direction in a data-direction attribute and using attribute selectors like [data-direction="top"] in your CSS means a single set of rules handles all positions automatically.
This avoids the need to write separate CSS classes for every individual tooltip on the page.
Why is my CSS tooltip being clipped or hidden by overflow?
This is almost always caused by an ancestor element having overflow: hidden or overflow: scroll set.
Because the tooltip is absolutely positioned, it is clipped by the nearest ancestor with a non-visible overflow value.
The fix is to either change that ancestor's overflow to visible (if it does not need scrolling), or restructure the HTML so the tooltip is a child of a container that is not subject to the overflow clipping - sometimes moving the tooltip higher up in the DOM tree is the most practical solution.