Altwise

Tooltips, info icons and hover pop-ups: showing fees, sizes and help text to everyone

How to make tooltips, info icons, size guides and hover pop-ups on a small business website work with a keyboard, touch and screen readers: show key fees in text, a copyable toggletip button, the hover rules in WCAG 1.4.13, platform notes and a 5-minute check.

Small business sites hide a lot of useful words behind a little "i" or "?" icon: the shipping fee, what "deposit" means, the size chart, the cancellation rule, why a field asks for a date of birth, or the name of a colour swatch. That text often only appears when a mouse hovers over it. Keyboard users can't reach it, phone users have no hover, screen readers may never hear it, people who zoom in see it cut off or covering what they're reading, and AI shopping assistants that read your page can miss it too. Shoppers are already wary of conditions they only find at the till. The fix is simple: put important details on the page, and make any pop-up hint work with a keyboard, touch and a screen reader (1.4.13 Content on Hover or Focus). Here's how.

1. First ask: does this need to be hidden at all?

If the hidden text changes what someone pays, books or agrees to, show it in plain text next to the price, button or field. Fees, deposits, minimums, cancellation windows, delivery cut-offs and "required" notes belong on the page. Keep pop-up hints for small extras. Visible help text tied to the field is also the easiest kind for screen readers (3.3.2 Labels or Instructions, 1.3.1 Info and Relationships).

<label for="party-size">Party size (required)</label>
<input id="party-size" name="party" type="number" min="1" aria-describedby="party-help" required>
<p id="party-help">Groups of 8 or more need a $50 deposit, refunded if you cancel 48 hours ahead.</p>

<p class="price">$36.00 <span>+ $6.95 shipping, free over $75</span></p>
<!-- example amounts and rules; use your real ones -->

The amounts and rules above are example details. Use your own.

2. If you need a pop-up hint, use a button ("toggletip")

An info icon that people can click or tap, and reach with the Tab key, works for mouse, touch, keyboard and screen readers. It needs a real button with a name, it should say whether it is open, the text should stay until the person closes it or moves on, and Escape should close it. This is a pattern many accessibility teams recommend over hover-only tooltips (2.1.1 Keyboard, 4.1.2 Name, Role, Value).

<p>
  Delivery fee: $6.95
  <button type="button" class="tip-btn" aria-expanded="false" aria-controls="fee-tip">
    <span aria-hidden="true">i</span><span class="visually-hidden">About the delivery fee</span>
  </button>
</p>
<p id="fee-tip" class="tip" hidden>Covers same-day delivery within 10 miles. Free on orders over $75.</p>

<style>
  .tip-btn { min-width: 24px; min-height: 24px; border: 2px solid #1a1a1a; border-radius: 50%; background: #fff; color: #1a1a1a; }
  .tip-btn:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; }
  .tip { border: 1px solid #1a1a1a; padding: .5rem .75rem; max-width: 30rem; background: #fff; color: #1a1a1a; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
</style>
<script>
  document.querySelectorAll('.tip-btn').forEach(function (btn) {
    var tip = document.getElementById(btn.getAttribute('aria-controls'));
    function setOpen(open) { btn.setAttribute('aria-expanded', open); tip.hidden = !open; }
    btn.addEventListener('click', function () { setOpen(tip.hidden); });
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape' && !tip.hidden) { setOpen(false); btn.focus(); }
    });
  });
</script>
<!-- example fee and wording; use your real details -->

The hint sits right after the button in the page, so a screen reader reaches it next and it doesn't cover other content. The button is at least 24 by 24 CSS pixels so it's easy to tap (2.5.8 Target Size (Minimum)), and its border stands out against the page (1.4.11 Non-text Contrast).

3. If you keep a hover tooltip, meet the three rules

Some themes and apps show a tooltip on hover. WCAG 1.4.13 asks that extra content which appears on hover or focus is:

It must also appear on keyboard focus, not only on mouse hover. A CSS-only starting point:

<span class="hint">
  <button type="button" aria-describedby="size-hint">Size guide</button>
  <span role="tooltip" id="size-hint">Runs small. Order one size up if between sizes.</span>
</span>

<style>
  .hint { position: relative; display: inline-block; }
  .hint [role="tooltip"] { display: none; position: absolute; top: 100%; left: 0; z-index: 10;
    margin-top: 0; padding: .5rem .75rem; width: max-content; max-width: 16rem;
    background: #1a1a1a; color: #fff; }
  /* shows on hover AND keyboard focus, and stays while the pointer is over the tooltip itself */
  .hint:hover [role="tooltip"], .hint:focus-within [role="tooltip"] { display: block; }
  .hint.dismissed [role="tooltip"] { display: none; }
</style>
<script>
  // Escape hides the tooltip without moving focus
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') document.querySelectorAll('.hint').forEach(function (h) { h.classList.add('dismissed'); });
  });
  document.querySelectorAll('.hint').forEach(function (h) {
    h.addEventListener('mouseleave', function () { h.classList.remove('dismissed'); });
    h.addEventListener('focusout', function () { h.classList.remove('dismissed'); });
  });
</script>
<!-- example wording; use your real size advice -->

There is no gap between the button and the tooltip (margin-top: 0), so the pointer can move onto it. Touch screens have no hover, so on phones this still depends on focus. For anything important, the toggletip in section 2 or plain text in section 1 is safer.

4. Don't rely on the title attribute

The browser's built-in title tooltip (the little yellow box) only shows on mouse hover, can't be reached by keyboard or touch, can't be zoomed and is read inconsistently by screen readers. It's fine as a bonus, but never as the only place a name or instruction lives. Icon-only buttons need a real accessible name, such as visible text or aria-label. See accessible links and buttons.

5. Hover menus, previews and "quick view"

The same rules apply to drop-down menus that open on hover, product cards that show a second photo or "Add to cart" only on hover, and map pins with hover cards. Make sure each opens with the keyboard, stays open while the pointer is on it, closes with Escape, and that the "Add to cart" or details link is reachable without hovering. See navigation menus and drop-downs.

Platform notes

Settings and app names change often, so check your platform's or app's own help pages for the current option.

Common mistakes

A 5-minute check you can do today

  1. On your product, booking or quote page, list every "i", "?" or hover hint. Does any of them hide a fee, deposit, rule or requirement? Move that into plain text.
  2. Using only Tab, Shift+Tab, Enter and Space, reach each info icon and open it. Can you always see where you are? See our keyboard test.
  3. With a hint open, press Escape. Does it close?
  4. Hover a hint with the mouse, then move the mouse onto the hint text. Does it stay?
  5. On your phone, tap each info icon. Does the text appear, and can you close it?
  6. Zoom to 200%. Does any pop-up cover the thing you're reading or run off the screen?

What a scan can and can't check here

Our scan is automated, so it finds only part of the barriers on the pages it visits. It can flag info icons and buttons with no accessible name, low contrast and some ARIA mistakes. It can't tell whether a tooltip opens with the keyboard, stays put when you hover it, closes with Escape, or hides a fee people need to know, which is why the 5-minute check above matters. Our Fix-Pack reports include copy-paste fixes for your platform for what the scan finds.

Related: accessible contact forms, form error messages, don't rely on colour alone, online store checkout, mobile zoom and tap targets.

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Have a staff or team page? See meet the team page accessibility.

Related guides

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.