--- title: Opening the can of tooltips | daily.dev description: An Edge Web Platform engineer explores why native tooltips built on the title HTML attribute are rarely used and poorly accessible, backing this with original... canonical: https://daily.dev/posts/opening-the-can-of-tooltips-pv5iyipnp twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Opening the can of tooltips | daily.dev og:description: An Edge Web Platform engineer explores why native tooltips built on the title HTML attribute are rarely used and poorly accessible, backing this with original... og:url: https://daily.dev/posts/opening-the-can-of-tooltips-pv5iyipnp og:image: https://api.daily.dev/og/posts/pV5IyIpNP.png og:image:alt: Opening the can of tooltips og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Opening the can of tooltips **[Patrick Brosset](https://daily.dev/sources/patrickbrosset)** · 12 min read · 1 upvotes · 1 comments ## Summary An Edge Web Platform engineer explores why native tooltips built on the title HTML attribute are rarely used and poorly accessible, backing this with original research on Tranco's top-5000 domains showing most title usage is redundant. The piece then outlines a proposed built-in, customizable tooltip feature using a new ::tooltip pseudo-element (or a new tooltip attribute), CSS Anchor Positioning, Interest Invokers, and Popover, designed to be stylable, keyboard accessible, and easy to upgrade from plain text to rich HTML content. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why is the HTML title attribute considered bad for accessible tooltips? The title attribute has multiple accessibility problems: it is not accessible to keyboard users except in Microsoft Edge, it cannot be dismissed with Escape, moving the pointer onto the tooltip area makes it disappear, screen readers announce it inconsistently, it can override an element's accessible name, and it ignores browser zoom level. Analysis of the top 5000 domains also found 70-76% of title attribute values are redundant with existing link text or alt text. _daily.dev surfaces accessibility-focused web platform proposals for developers rethinking tooltip patterns._ ### How popular is the Radix UI tooltip component for React? The Radix UI React tooltip primitive is downloaded 57 million times per week, offering a fully CSS-stylable tooltip that follows the WAI-ARIA Authoring Practices Guide tooltip pattern. Its popularity shows that despite developers avoiding the native title attribute, the underlying need for labeling icon-only controls and clarifying UI elements remains strong. _developers weighing tooltip libraries versus native browser features can track this debate on daily.dev._ ### What is the proposed CSS ::tooltip pseudo-element and how would it work with HTML attributes? The Edge Web Platform team proposes a ::tooltip pseudo-element styled via CSS, triggered either by opting into appearance: base on the existing title attribute or by a new tooltip attribute that takes precedence over title when both are present. It would use CSS Anchor Positioning for placement and Interest Invokers with the interest-delay property for hover timing, and upgrading to rich HTML content only requires switching selectors from ::tooltip to [popover] while keeping the same CSS. _follow proposals like this on daily.dev before they land in browsers and reshape how you build tooltips._ ## Community discussion Top comments from developers on daily.dev. **@jeanne** · 0 upvotes > Amazing solution suggested! I had the feeling that despite being not recommanded for accessibility reasons, tooltips still enable to convey information that any other mean cannot replace. > > I am glad to read about your proposal, and from my (modest) experience, it appears steady, complete and a also easy to use. > > I would rush on this solution to bring down all the JS in place in my work! ## Similar posts on daily.dev - [A reusable tooltip built with a custom element](https://daily.dev/posts/a-reusable-tooltip-built-with-a-custom-element-vzpvycx0w) · RUBYLAND · 0 upvotes · 0 comments - [Perfectly Pointed Tooltips: A Foundation – Frontend Masters Blog](https://daily.dev/posts/perfectly-pointed-tooltips-a-foundation-frontend-masters-blog-yodltprsv) · Frontend Masters · 6 upvotes · 0 comments - [CSS does your tooltip positioning now](https://daily.dev/posts/css-does-your-tooltip-positioning-now-4wx8q4s5u) · Matt Smith · 8 upvotes · 2 comments - [Getting Started With The Popover API — Smashing Magazine](https://daily.dev/posts/getting-started-with-the-popover-api-smashing-magazine-vjbltzl0j) · Smashing Magazine · 47 upvotes · 2 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/opening-the-can-of-tooltips-pv5iyipnp) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Opening the can of tooltips","url":"https://daily.dev/posts/opening-the-can-of-tooltips-pv5iyipnp","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/opening-the-can-of-tooltips-pv5iyipnp"},"datePublished":"2026-10-02T18:10:00.799Z","dateModified":"2026-10-02T18:23:05.595Z","description":"An Edge Web Platform engineer explores why native tooltips built on the title HTML attribute are rarely used and poorly accessible, backing this with original...","image":"https://media.daily.dev/image/upload/s--P4t4XyoV--/f_auto/v1722860399/public/Placeholder%2001","thumbnailUrl":"https://media.daily.dev/image/upload/s--P4t4XyoV--/f_auto/v1722860399/public/Placeholder%2001","isAccessibleForFree":true,"articleSection":"Patrick Brosset","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Patrick Brosset","logo":"https://media.daily.dev/image/upload/s--AD7IzOuB--/f_auto,q_auto/v1774179622/logos/patrickbrosset","url":"https://daily.dev/sources/patrickbrosset"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/opening-the-can-of-tooltips-pv5iyipnp","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"webdev,css,html,accessibility","timeRequired":"PT12M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Patrick Brosset","item":"https://daily.dev/sources/patrickbrosset"},{"@type":"ListItem","position":3,"name":"Opening the can of tooltips"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/opening-the-can-of-tooltips-pv5iyipnp","comment":[{"@type":"Comment","text":"Amazing solution suggested! I had the feeling that despite being not recommanded for accessibility reasons, tooltips still enable to convey information that any other mean cannot replace.\nI am glad to read about your proposal, and from my (modest) experience, it appears steady, complete and a also easy to use.\nI would rush on this solution to bring down all the JS in place in my work!","datePublished":"2026-10-04T08:45:46.919Z","url":"https://daily.dev/posts/pV5IyIpNP#c-GjXXAxBnD","author":{"@type":"Person","name":"Jeanne Auvray","url":"https://daily.dev/jeanne","image":"https://media.daily.dev/image/upload/s--O0TOmw4y--/f_auto/v1715772965/public/noProfile"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/opening-the-can-of-tooltips-pv5iyipnp#faq","mainEntity":[{"@type":"Question","name":"Why is the HTML title attribute considered bad for accessible tooltips?","acceptedAnswer":{"@type":"Answer","text":"The title attribute has multiple accessibility problems: it is not accessible to keyboard users except in Microsoft Edge, it cannot be dismissed with Escape, moving the pointer onto the tooltip area makes it disappear, screen readers announce it inconsistently, it can override an element's accessible name, and it ignores browser zoom level. Analysis of the top 5000 domains also found 70-76% of title attribute values are redundant with existing link text or alt text. daily.dev surfaces accessibility-focused web platform proposals for developers rethinking tooltip patterns."}},{"@type":"Question","name":"How popular is the Radix UI tooltip component for React?","acceptedAnswer":{"@type":"Answer","text":"The Radix UI React tooltip primitive is downloaded 57 million times per week, offering a fully CSS-stylable tooltip that follows the WAI-ARIA Authoring Practices Guide tooltip pattern. Its popularity shows that despite developers avoiding the native title attribute, the underlying need for labeling icon-only controls and clarifying UI elements remains strong. developers weighing tooltip libraries versus native browser features can track this debate on daily.dev."}},{"@type":"Question","name":"What is the proposed CSS ::tooltip pseudo-element and how would it work with HTML attributes?","acceptedAnswer":{"@type":"Answer","text":"The Edge Web Platform team proposes a ::tooltip pseudo-element styled via CSS, triggered either by opting into appearance: base on the existing title attribute or by a new tooltip attribute that takes precedence over title when both are present. It would use CSS Anchor Positioning for placement and Interest Invokers with the interest-delay property for hover timing, and upgrading to rich HTML content only requires switching selectors from ::tooltip to [popover] while keeping the same CSS. follow proposals like this on daily.dev before they land in browsers and reshape how you build tooltips."}}]} ```