Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
For a basic browser tooltip, add a short title attribute to the <img> element:
<img src="park-map.png" alt="Map of the park" title="Trail map">Most browsers show the title after a pointer pauses over the image. Keep alt because it is the image’s text alternative; title is optional advisory text and does not replace it. If the words must be visible to everyone, use a caption or ordinary page text instead of relying on a hover tooltip.
What an HTML image tooltip actually is
HTML has no special “image-tooltip” element. The usual implementation is the global title attribute on an <img> element. The browser decides whether and how to present that advisory text. A desktop browser commonly displays a small popup when the pointer rests over the image, but timing, styling and visibility are user-agent behavior rather than a guaranteed part of your page design.
Recommended Free Tools
Use a title for brief, supplementary context such as “Trail map” or “Opens the high-resolution version.” Do not put a required explanation, warning, price, copyright notice or data value only in the tooltip. Keyboard users, touch users and some assistive-technology users may never receive it.
#1 Best Overall
Use alt and title for different jobs
| Attribute or element | Purpose | Typical access method | Best practice |
|---|---|---|---|
alt |
Text alternative for the image when it cannot be seen or loaded | Screen readers and fallback text | Describe the image’s purpose in context; do not treat it as a tooltip |
title |
Optional advisory information | Often pointer hover; user-agent dependent | Keep it short, supplementary and nonessential |
<figcaption> |
Visible caption associated with a figure | Everyone who can see the page; programmatic figure structure | Use when the caption should be part of the document |
| Custom tooltip | Designed, interactive supplementary content | Must support keyboard and other non-pointer input | Provide a focusable trigger and evaluate hover/focus behavior against WCAG guidance |
Write useful alternative text
alt should communicate the image’s role, not repeat a filename. For a decorative image, use an empty value (alt="") so it is skipped. For an informative image, describe the information a user needs. For a linked image, describe the link destination or action.
<!-- Informative image -->
<img src="park-map.png" alt="Map showing the north trail and lake" title="Trail map">
<!-- Decorative image -->
<img src="leaf-divider.svg" alt="" title="Seasonal decoration">
<!-- Image used as a link -->
<a href="/downloads/map-large.png">
<img src="map-thumb.png" alt="Download the full-size park map" title="Full-size map">
</a>Avoid copying the same phrase into both attributes. Repetition can produce confusing duplicate announcements in some screen-reader experiences. The title should add a small piece of advisory context, if it adds anything at all.
Basic implementation patterns
One image with hover text
<img
src="park-map.png"
alt="Map showing the north trail and lake"
title="Trail map"
>Keep the value concise. There is no standard HTML syntax for setting the tooltip’s color, delay, position or animation. CSS cannot reliably style the browser’s native title popup.
Several images generated from data
When rendering a gallery, give every image its own meaningful alternative text and, only where useful, its own advisory title. Do not put the same generic title on every item.
<ul class="gallery">
<li>
<img src="lake.jpg" alt="Sunrise over the park lake" title="Lake at sunrise">
</li>
<li>
<img src="bridge.jpg" alt="Wooden bridge crossing the north trail" title="North trail bridge">
</li>
</ul>When the image needs a real caption
Use a figure when the text is a caption or attribution that belongs visibly with the image:
<figure>
<img src="park-map.png" alt="Map showing the north trail and lake">
<figcaption>North trail map, revised September 2026.</figcaption>
</figure>A caption remains available without hover and can be styled as part of your page. If the information is essential, make it visible in this way or in adjacent text.
What happens on keyboard, touch and assistive technology
A pointer hover is not a universal interaction. Touchscreens generally have no persistent hover state. Keyboard users may tab to a link or button around an image without ever triggering a title on the image itself. Screen readers can expose title content inconsistently, and some may announce both alt and title, creating repetition.
The HTML Standard describes title as advisory information and cautions against relying on it for content that needs broad access. Reference documentation likewise notes that title presentation depends on the user agent. Treat the native tooltip as a convenience, not as an accessibility mechanism.
Building a custom tooltip when native title is not enough
A custom tooltip is appropriate when you need controlled wording, layout or interaction. It is also more work: you must define when it appears, how it is dismissed, how it is positioned, and how keyboard and touch users reach it.
Minimal, focusable pattern
<button class="info-trigger" type="button" aria-describedby="map-help">
<img src="park-map.png" alt="Map showing the north trail and lake">
</button>
<span id="map-help" role="tooltip" hidden>Trail map; updated September 2026.</span>In a production component, show the tooltip on pointer hover and keyboard focus, hide it when focus leaves, and provide a touch-friendly way to open and dismiss it. Ensure it is not clipped by an overflow container, remains readable at zoom, and does not obscure the control that opened it. Additional content that appears on hover or focus raises questions covered by WCAG 2.1 Success Criterion 1.4.13 guidance: users should be able to dismiss it, move the pointer to it when needed, and keep it visible while interacting.
Do not add role="tooltip" to an ordinary static caption just to obtain a styling hook. Use semantic visible text for captions and descriptions; reserve tooltip behavior for genuinely supplementary content.
Free tools Windows power users keep installed
One-click scans. No signup required.
Title inheritance and empty values
The HTML Standard allows a missing title to inherit relevance from the nearest ancestor with a title in some processing contexts. An empty title="" can suppress inherited relevance for that element. This subtle behavior is not a good way to distribute important content: it is easy to overlook in nested markup and remains dependent on how user agents expose advisory text.
<div title="Gallery of park images">
<img src="lake.jpg" alt="Sunrise over the park lake">
<img src="bridge.jpg" alt="Wooden bridge crossing the north trail" title="">
</div>Prefer explicit attributes or visible text when a user must receive the information. Avoid putting a broad title on a container and assuming every descendant will receive a useful, distinct tooltip.
Testing checklist
- Load the page with images disabled and confirm every meaningful image still has an appropriate text alternative.
- Hover on a desktop browser to verify the short advisory text is understandable, but do not treat that test as proof of accessibility.
- Navigate with the keyboard alone. Confirm essential information is available without pointing at the image.
- Check a touch device or narrow viewport; there may be no hover state.
- Use a screen reader or accessibility tree to check that alternative text is not duplicated by a needless title.
- Zoom the page and test high-contrast or forced-colors settings if the information is important.
- For a custom tooltip, test focus, dismissal, pointer movement into the tooltip, and clipping inside scrolling or overflow containers.
Common mistakes and fixes
Using title instead of alt
Symptom: the image has hover text but no useful announcement when it cannot be seen. Fix: add a context-appropriate alt; retain title only for supplementary information.
Repeating the same sentence
Symptom: a screen reader announces the same words twice. Fix: remove the duplicate title or make it genuinely additive.
Rank #4
Putting a caption only in the tooltip
Symptom: keyboard and touch users miss the caption. Fix: use <figure> and <figcaption>, or visible text adjacent to the image.
Expecting CSS to style the native popup
Symptom: a design requires a branded tooltip but the browser popup cannot be changed consistently. Fix: build a custom component with an accessible focus and dismissal model, or accept the native browser presentation.
Making a custom tooltip hover-only
Symptom: it works with a mouse but not a keyboard or touchscreen. Fix: support focus and an explicit touch interaction, and verify the hover/focus behavior against WCAG guidance.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If your goal is to obtain a clean image of a page rather than implement a tooltip in that page, ScreenshotNeo provides a website screenshot API and MCP server. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and responses identify the result with X-Page-Verdict and X-Billed headers.
One GET request returns PNG, JPEG, WebP or PDF. The API supports full-page captures with lazy images loaded, CSS-selector element shots, dark mode, device presets and arbitrary viewports, retina scale, PDF paper settings and page ranges, custom CSS and JavaScript, clicks, selector or network-idle waits, request and resource blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, usage data and an OpenAPI specification. Parameter names used by other screenshot APIs also work for easier migration.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for parameter details. An MCP server exposes take_screenshot, get_page_info and capture_pdf to Claude, Cursor and other MCP clients, so an AI agent can perform captures directly.
Best Value
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan, and yearly billing gives two months free. Create a free ScreenshotNeo account to get started.
Frequently Asked Questions
Does an image need both alt and title attributes?
No. Every meaningful image needs appropriate alt text; title is optional and should be added only when short advisory information is useful.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Can I change the browser’s native image tooltip with CSS?
Not reliably. Native title popups are controlled by the user agent. Use visible text or an accessible custom component when you need a designed presentation.
What should I use for a photo credit?
Use visible text, commonly a figcaption or adjacent credit, rather than placing the credit only in title.
Why does my tooltip not appear on a phone?
Touch devices usually do not provide a persistent pointer-hover state. Put important content in the page or provide an explicit, keyboard- and touch-accessible control.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →
