Let’s begin.<\/p>\n\n\n\n\n\n\n
What are tooltips?<\/h3>\n\n\n
Tooltips are used to provide simple text hints for UI controls. Think of them as tips for tools. They’re basically little bubbles of text content that pop up when you hover over an unnamed control (like the bell icon in Stripe).<\/p>\n\n\n\n If you prefer more of a formal definition, Sarah Highley provides us with a pretty good one:<\/p>\n\n\n\n A “tooltip” is a non-modal<\/a> (or non-blocking) overlay containing text-only content that provides supplemental information about an existing UI control. It is hidden by default, and becomes available on hover or focus of the control it describes.<\/p>\n<\/blockquote>\n\n\n\n She further goes on to say:<\/p>\n\n\n\n That definition could even be narrowed down even further by saying tooltips must provide only descriptive text.<\/p>\n<\/blockquote>\n\n\n\n This narrowed definition is basically<\/strong> (in my experience) how every accessibility expert defines tooltips:<\/strong><\/p>\n\n\n\n Heydon Pickering takes things even further, saying: If you’re thinking of adding interactive content (even an In his<\/a> words:<\/p>\n\n\n\n You’re thinking of dialogs. Use a dialog.<\/p>\n<\/blockquote>\n\n\n Tooltips are basically only used for two things:<\/p>\n\n\n\n Heydon separates these cleanly into two categories, “Primary Label” and “Auxiliary description” in his Inclusive Components article on tooltips and toggletips<\/a>).<\/p>\n\n\n\n If your tooltip is used to label an icon \u2014 using only one or two words \u2014 you should use the You could provide contextual information, like stating the number of notifications, by giving a space-separated list of If your tooltip provides a contextual description of the icon, you should use In this case, Heydon recommends including the label as the text content of the button. This label would be hidden visually from sighted users but read for screen readers.<\/p>\n\n\n\n Then, you can add Here, screen readers would say “3 notifications” first, followed by “view and manage notifications settings” after a brief pause.<\/p>\n\n\n Here are a couple of additional points you should be aware of:<\/p>\n\n\n\n Do:<\/strong><\/p>\n\n\n\n Don’t:<\/strong><\/p>\n\n\n\n Tooltips are inaccessible to most touch devices because:<\/p>\n\n\n\n The best alternative is not to use tooltips, and instead, find a way to include the label or descriptive text in the design.<\/p>\n\n\n\n If the “tooltip” contains a lot of content \u2014 including interactive content \u2014 you may want to display that information with a Toggletip (or just use a Heydon explains toggletips<\/a> nicely and concisely:<\/p>\n\n\n\n Toggletips exist to reveal information balloons. Often they take the form of little “i” icons.<\/p>\n<\/blockquote>\n\n\n\n These informational icons should be wrapped within a Speaking anymore about toggletips detracts this article from tooltips so I’ll point you to Heydon’s “Tooltips and Toggletips”<\/a> article if you’re interested in chasing this short rabbit hole.<\/p>\n\n\n\n That’s all you need to know about tooltips and their current best practices!<\/p>\n\n\n What are tooltips, exactly? There’s two kinds and the one you use has implications on the user experience, as Zell illustrates in this explainer on best practices.<\/p>\n","protected":false},"author":45842,"featured_media":382092,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2},"_share_on_mastodon":"1","_share_on_mastodon_status":"Zell's so stinkin' good at explaining technical jargon in the most practical way possible \u2014 which makes him great for writing about best practices for tooltips. %permalink%"},"categories":[4],"tags":[1391,4976,731],"class_list":["post-382082","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-dialog","tag-popover","tag-semantics"],"acf":{"show_toc":"Yes"},"share_on_mastodon":{"url":"https:\/\/mastodon.social\/@csstricks\/113391074464382431","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/10\/tooltip.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":816,"url":"https:\/\/css-tricks.com\/image-map-with-prototype-tooltips\/","url_meta":{"origin":382082,"position":0},"title":"Image Map with Prototype Tooltips","author":"Chris Coyier","date":"July 11, 2008","format":false,"excerpt":"The areas inside of regular ol' HTML image maps support the title attribute which makes regular tooltips possible. Sometimes the default browser tooltips just don't cut it, especially with their built in delays. My favorite package for doing fancy tooltips is Prototip for the Prototype javascript framework. Prototip is free\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/image-map-tools.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/image-map-tools.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/image-map-tools.jpg?resize=525%2C300 1.5x"},"classes":[]},{"id":360490,"url":"https:\/\/css-tricks.com\/can-css-prevent-tooltips-from-overflowing\/","url_meta":{"origin":382082,"position":1},"title":"What Would it Take to Prevent CSS Tooltips From Overflowing?","author":"Chris Coyier","date":"January 11, 2022","format":false,"excerpt":"Say you have an elements with CSS tooltips and you're going to position those tooltips such that it opens up next to the element on hover (or probably better: when clicked\/tapped). Next to it where? Above it? What if the element is already really close to the top of the\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/Directionally-aware.png?fit=816%2C616&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/Directionally-aware.png?fit=816%2C616&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/Directionally-aware.png?fit=816%2C616&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/Directionally-aware.png?fit=816%2C616&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":14950,"url":"https:\/\/css-tricks.com\/bubble-point-tooltips-with-css3-jquery\/","url_meta":{"origin":382082,"position":2},"title":"Bubble Point Tooltips with CSS3 & jQuery","author":"Chris Coyier","date":"November 17, 2011","format":false,"excerpt":"I needed some tooltips for a thing. In looking around for a little inspiration, I didn't have to go further than my dock: The inspiration: contextual menus from OS X dock This is where I ended up: View Demo The HTML: Keepin' it Clean Links can have tooltips in HTML\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/11\/tooltip-scematics.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":382008,"url":"https:\/\/css-tricks.com\/clarifying-the-relationship-between-popovers-and-dialogs\/","url_meta":{"origin":382082,"position":3},"title":"Clarifying the Relationship Between Popovers and Dialogs","author":"Zell Liew","date":"October 23, 2024","format":false,"excerpt":"Pop quiz! What's the difference between a Popover element and a Dialog element? The answer is not all that clear and is widely misunderstood, but Zell has a clear way to explain it so that you know which element to reach for in your work.","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/10\/dialog-pop.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/10\/dialog-pop.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/10\/dialog-pop.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/10\/dialog-pop.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/10\/dialog-pop.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":351389,"url":"https:\/\/css-tricks.com\/dont-attach-tooltips-to-document-body\/","url_meta":{"origin":382082,"position":4},"title":"Don\u2019t attach tooltips to document.body","author":"Chris Coyier","date":"September 8, 2021","format":false,"excerpt":"Here's Atif Afzal on using a ![\"Hovering](https://calendarstemplates.com/\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/10\/tooltip.png?resize=1005%2C420&ssl=1\")
\n
\n
\n
ok<\/code> button), you should be using dialog<\/code> instead.<\/p>\n\n\n\n\n
Two kinds of tooltips<\/h3>\n\n\n
\n
![\"Two](https://calendarstemplates.com/\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/10\/two-kinds.png?resize=707%2C324&ssl=1\")
<\/figure>\n\n\nLabeling<\/h4>\n\n\n
aria-labelledby<\/code><\/a> attribute to properly label it since it is attached to nothing else on the page that would help identify it.<\/p>\n\n\n\n<button aria-labelledby=\"notifications\"> ... <\/button>\n<div role=\"tooltip\" id=\"notifications\">Notifications<\/div> <\/code><\/pre>\n\n\n\nid<\/code>s to aria-labelledby<\/code>.<\/p>\n\n\n\n![\"Bell](https://calendarstemplates.com/\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/10\/label-with-context.png?resize=719%2C242&ssl=1\")
<\/figure>\n\n\n\n<button aria-labelledby=\"notifications-count notifications-label\"> \n <!-- bell icon here --> \n <span id=\"notifications-count\">3<\/span>\n<\/button> \n\n<div role=\"tooltip\" id=\"notifications-label\">Notifications<\/div><\/code><\/pre>\n\n\nProviding contextual description<\/h4>\n\n\n
aria-describedby<\/code>. But, when you do this, you also need to provide an accessible name for the icon.<\/p>\n\n\n\naria-describedby<\/code><\/a> to include the auxiliary description.<\/p>\n\n\n\n<button class=\"notifications\" aria-describedby=\"notifications-desc\"> \n <!-- icon for bell here --> \n <span id=\"notifications-count\">3<\/span> \n <span class=\"visually-hidden\">Notifications<\/span>\n<\/button> \n\n<div role=\"tooltip\" id=\"notifications-desc\">View and manage notifications settings<\/div> <\/code><\/pre>\n\n\n\nAdditional tooltip dos and don’ts<\/h3>\n\n\n
\n
aria-labellebdy<\/code> or aria-describedby<\/code> attributes depending on the type of tooltip you’re building.<\/li>\n\n\n\ntooltip<\/code> role even if it doesn’t do much in screen readers today<\/a>, because it may extend accessibility support<\/a> for some software.<\/li>\n\n\n\nmouseover<\/code> or focus<\/code>, and close them on mouseout<\/code> or blur<\/code>.<\/li>\n\n\n\nEscape<\/code> button, per WCAG Success Criterion 1.4.13<\/a>.<\/li>\n<\/ul>\n\n\n\n\n
title<\/code> attribute. Much has been said about this<\/a> so I shall not repeat them.<\/li>\n\n\n\naria-haspopup<\/code><\/a> attribute with the tooltip<\/code><\/a> role because aria-haspopup<\/code> signifies interactive content while tooltip<\/code> should contain non-interactive content.<\/li>\n\n\n\naria-labelledby<\/code> or aria-describedby<\/code>. (It’s rare, but possible.<\/a>)<\/li>\n<\/ul>\n\n\nTooltip limitations and alternatives<\/h3>\n\n\n
\n
<dialog><\/code> element<\/a>).<\/p>\n\n\n\n\n
![\"Information](https://calendarstemplates.com/\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/10\/toggletip.png?resize=693%2C141&ssl=1\")
<\/figure>\n\n\n\n<button><\/code> element. When opened, screen readers can announce the text contained in it through a live region<\/a> with the status<\/code><\/a> role.<\/p>\n\n\n\n<span class=\"tooltip-container\"> \n <button type=\"button\" aria-label=\"more info\">i<\/button> \n <span role=\"status\">This clarifies whatever needs clarifying<\/span>\n<\/span><\/code><\/pre>\n\n\n\nFurther reading<\/h3>\n\n\n
\n
aria-label<\/code>, aria-labelledby<\/code>, and aria-describedby<\/code><\/a> (L\u00e9onie Watson)<\/li>\n\n\n\n