Set the text, the side the tooltip appears on, the colors and the size of the arrow, and get the HTML and CSS to paste into your page. The tooltip is pure CSS, with no JavaScript: the text sits in a data attribute, a pseudo-element draws the bubble and a second one draws the arrow.
Top is the common default because the pointer and the hand do not cover it. Bottom suits elements near the top of a page where there is no room above. Left and right are for items in a narrow column, such as icons in a toolbar, where a tip above or below would run into neighbouring items.
Think about what is next to the element. A tooltip is positioned relative to its trigger and is not aware of the window, so if the trigger sits at the edge of the screen, a centred tip can extend past it. Test the edge cases by dragging the browser window narrower.
A tooltip is small and appears briefly, so it must be easy to read at a glance. Dark background with white text is the usual choice and gives strong contrast. Check any other pair with a contrast checker, aiming for at least 4.5 to 1 for text of this size.
The arrow takes its color from the background color you choose, so the bubble and the arrow always match. If your page has a coloured background, pick a tooltip color that stands apart from it, or the bubble will seem to dissolve into the page.
CSS tooltips are good for short labels on icons and for brief explanations of a term. They are the wrong tool when the content has links or buttons inside, because the tip disappears when the pointer leaves the element, so the visitor cannot move into it. For richer content, use a popover that opens on click.
Also consider the native title attribute for the simplest cases. It needs no CSS and works with assistive technology, though you cannot style it and it appears after a delay. A custom tooltip is the right choice when you want a consistent look, an arrow or an immediate response.
The tip text is stored in a data-tooltip attribute on the element. The ::after pseudo-element shows that text with content: attr(data-tooltip) and is positioned next to the element. The ::before pseudo-element draws the arrow with a CSS border triangle. Both are hidden until the element is hovered or focused.
A box with no width or height and a thick border looks like four triangles meeting in the middle. Making three of the borders transparent leaves one coloured triangle. For a tooltip above the element, the arrow has a coloured top border and transparent left and right borders, so it points downwards.
The arrow size is the height of the triangle. The gap is the empty space between the element and the arrow tip. The bubble sits at gap plus arrow size from the element, so with a 4 pixel gap and a 6 pixel arrow, the bubble starts 10 pixels away.
It works for mouse and, with the focus option, for keyboard users. Screen readers may not announce text drawn by CSS, so if the information matters, also give the element an aria-label or put the text on the page. Tooltips are also unavailable on touch screens.
Yes. The CSS is attached to a class, so add that class and a different data-tooltip to as many elements as you like. Use the class name box if tooltip clashes with a class already in your stylesheet.
Related: CSS shadow generator, CSS layout generator, Color contrast checker.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.