Member Avatar for raydeen

The text disappears if the user rolls over the image for longer than 7 secs. If the title attribute isn't the best way to do this, what is a better way?

Thanks,
Tony

  • 3 Contributors
  • 2 Replies
  • 120 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by karol33

Dani AI

Generated

Browser tooltips produced by the title attribute are controlled by the browser: you get little styling control and many UAs will hide the tooltip after a short time. For a tooltip that stays visible (and that you can style, position, or animate), use a small HTML/CSS/JS implementation that shows on hover and focus and hides only when you want. Thanks to for the generator pointer — a JS/CSS tooltip gives the control you need.

Do not rely on a tooltip for essential information. Put the primary description in the image alt attribute and use the tooltip only for supplemental details. The title attribute is advisory and handled inconsistently by assistive tech; follow ARIA tooltip patterns for keyboard and screen-reader support (MDN: title attribute, WAI-ARIA tooltip example).

Quick accessible pattern (concept only — adjust to fit your codebase):

<img src="photo.jpg" alt="Brief description" data-tooltip="Longer explanatory text" tabindex="0">

/* CSS: .tooltip { position:absolute; background:#000; color:#fff; padding:6px; border-radius:4px; } */

/* JS: on mouseenter/focus create a div[role=tooltip], set its text from data-tooltip,
   position it next to the image, set aria-describedby on the image,
   clear any hide timeout while hovered/focused, and hide after your chosen delay on mouseleave/blur. */

Notes: keep tooltip text in the DOM (or ensure server-side fallback) if the content must be indexable, and test on touch devices (use tap to toggle). For SEO and accessibility questions raised by , remember that alt is the canonical place for image descriptions; tooltips are supplementary.

Recommended Answers

All 2 Replies

Member Avatar for karol33

is that tooltip seo friendly?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.