The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="row">
  <button class="tip" data-tip="Copy to clipboard" aria-label="Copy to clipboard">Copy</button>
  <button class="tip" data-tip="Share this page" aria-label="Share this page">Share</button>
  <button class="tip" data-tip="Add to favourites" aria-label="Add to favourites">Save</button>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create a pure-CSS tooltip component (no JavaScript).

Requirements:
- Any element with class "tip" and a data-tip attribute shows a tooltip above it.
- The bubble is a ::after pseudo-element with content: attr(data-tip): navy #002057 background, white 0.8rem bold text, 8px radius, 7px 12px padding, white-space: nowrap, positioned at bottom: calc(100% + 10px), horizontally centred with left: 50% and translateX(-50%).
- A small downward arrow is a ::before pseudo-element made from borders (5px transparent border with a navy top border).
- Hidden by default (opacity 0, shifted 6px down); on :hover and :focus-visible both fade in and slide up over 0.2s.
- pointer-events: none on the bubble so it never blocks the cursor.
- Demo: three white outlined buttons (Copy, Share, Save) in a row, each with a tooltip and a matching aria-label.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Store the tooltip text in a data attribute and print it with content: attr(data-tip) in a pseudo-element.

2. 2

   Position the bubble above the trigger with bottom: calc(100% + gap) and centre it with left: 50% plus translateX(-50%).

3. 3

   Make the arrow from a zero-size element with transparent borders and one coloured border.

4. 4

   Hide both with opacity: 0 and reveal them on :hover and :focus-visible so keyboard users see the tooltip too.

5. 5

   Add an aria-label with the same text, because pseudo-element content is not reliably announced by screen readers.

Customisation tips

• Flip it below the element by using top instead of bottom and border-bottom-color for the arrow.
• Keep tooltip text short. For longer help, use a popover or inline hint.
• Tooltips do not appear on touch screens without a tap, so never hide essential information in one.

More components