You know the title attribute? I can do this:

Im a div with a `title`

And now if I’m on a device with a mouse pointer and hover the cursor over that element, I get…
ScreenshotScreenshot
Which, uh, I guess is something. I sometimes use it for things like putting an expanded date or time on an element that uses shorthand for it. It’s a tiny bit of UX helpfulness reserved exclusively for sighted mouse users.
But it’s not particularly useful, as I understand it. Ire Aderinokun dug into how it’s used for the element (a commonly cited example) and found that it’s not-so-great alone. She suggests a JavaScript-enhanced pattern. She also mentions that JAWS has a setting for announcing titles in there, so that’s interesting (although it sounds like it’s off by default).
I honestly just don’t know how useful title is for screen readers, but it’s certainly going to be nuanced.
I did just learn something about titles though… this doesn’t work:


If you hover over that element, you won’t get a title display. You have to do it like this:

Checkout A shopping cart icon with baguettes and broccoli in the cart.
Which, interestingly, Firefox 79 just started supporting.
When you use title like that, the hoverable area to reveal the title popup is the entire rectangle of the .
I was looking at all this because I got an interesting email from someone who was in a situation where the title popup only seemed to come up when hovering over the “filled in” pixels of an SVG, and not where transparent pixels were. Weird, I thought. I couldn’t replicate in my testing either.
Turns out there is a situation like this. You can apply a within a <use> element, then the title only applies to those pixels that come in via the <use>.<br /> CodePen Embed Fallback<br /> If you remove the “white part” title, you’ll see the “black part” only comes up over the black pixels. Seems to be consistent across browsers. Just something to watch out for if that’s how you apply titles.</p> <span class="cp-load-after-post"></span></div><div class="post-meta wf-mobile-collapsed"><div class="entry-meta"><span class="category-link">Categories: <a href="https://skynetch.com/category/latest-technologies/" >Latest technologies</a>, <a href="https://skynetch.com/category/software-applications/" >software applications</a>, <a href="https://skynetch.com/category/ui-ux-layout/" >UI / UX layout</a>, <a href="https://skynetch.com/category/uncategorized/" >Uncategorized</a></span><a class="author vcard" href="https://skynetch.com/author/admin/" title="View all posts by admin" rel="author">By <span class="fn">admin</span></a><a href="https://skynetch.com/2020/08/25/" title="11:23 am" class="data-link" rel="bookmark"><time class="entry-date updated" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></a></div><div class="entry-tags">Tags: <a href="https://skynetch.com/tag/design/" rel="tag">Design</a><a href="https://skynetch.com/tag/marketing-and-seo/" rel="tag">Marketing and SEO</a><a href="https://skynetch.com/tag/mobile-apps/" rel="tag">Mobile apps</a><a href="https://skynetch.com/tag/quality/" rel="tag">Quality</a><a href="https://skynetch.com/tag/seo/" rel="tag">Seo</a><a href="https://skynetch.com/tag/software/" rel="tag">Software</a><a href="https://skynetch.com/tag/sofware-applications/" rel="tag">Sofware applications</a><a href="https://skynetch.com/tag/technology/" rel="tag">Technology</a><a href="https://skynetch.com/tag/web-applications-development-web-applications/" rel="tag">Web applications development Web applications</a><a href="https://skynetch.com/tag/website-creation/" rel="tag">Website creation</a></div></div><div class="single-share-box"> <div class="share-link-description">Share this post</div> <div class="share-buttons"> <a class="facebook" href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fskynetch.com%2F2020%2F08%2F25%2F36%2F&t=SVG+Title+vs.+HTML+Title+Attribute" title="Facebook" target="_blank" ><span class="soc-font-icon"></span><span class="social-text">Share on Facebook</span><span class="screen-reader-text">Share on Facebook</span></a> <a class="twitter" href="https://twitter.com/share?url=https%3A%2F%2Fskynetch.com%2F2020%2F08%2F25%2F36%2F&text=SVG+Title+vs.+HTML+Title+Attribute" title="Twitter" target="_blank" ><span class="soc-font-icon"></span><span class="social-text">Tweet</span><span class="screen-reader-text">Share on Twitter</span></a> <a class="pinterest pinit-marklet" href="//pinterest.com/pin/create/button/" title="Pinterest" target="_blank" data-pin-config="above" data-pin-do="buttonBookmark"><span class="soc-font-icon"></span><span class="social-text">Pin it</span><span class="screen-reader-text">Share on Pinterest</span></a> <a class="whatsapp" href="https://api.whatsapp.com/send?text=SVG%20Title%20vs.%20HTML%20Title%20Attribute%20-%20https%3A%2F%2Fskynetch.com%2F2020%2F08%2F25%2F36%2F" title="WhatsApp" target="_blank" data-action="share/whatsapp/share"><span class="soc-font-icon"></span><span class="social-text">Share on WhatsApp</span><span class="screen-reader-text">Share on WhatsApp</span></a> <a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fskynetch.com%2F2020%2F08%2F25%2F36%2F&title=SVG%20Title%20vs.%20HTML%20Title%20Attribute&summary=&source=Skynetch" title="LinkedIn" target="_blank" ><span class="soc-font-icon"></span><span class="social-text">Share on LinkedIn</span><span class="screen-reader-text">Share on LinkedIn</span></a> </div> </div> <div class="author-info entry-author"> <span class="author-avatar no-avatar"></span> <div class="author-description"> <h4><span class="author-heading">Author:</span> admin</h4> <a class="author-link" href="http://skynetch.com" rel="author">http://skynetch.com</a> <p class="author-bio"></p> </div> </div> <nav class="navigation post-navigation" role="navigation"><h2 class="screen-reader-text">Post navigation</h2><div class="nav-links"><span class="nav-previous disabled"></span><a class="back-to-list" href="/agency/"><i class="dt-icon-the7-misc-006-1" aria-hidden="true"></i></a><span class="nav-next disabled"></span></div></nav><div class="single-related-posts"><h3>Related Posts</h3><section class="items-grid"><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/692/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/692/">Create Amazingly Stable Tests Your Way — Coded and Code-Less</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/717/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/717/">Weekly Platform News: Internet Explorer Mode, Speed Report in Search Console, Restricting Notification Prompts</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/736/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/736/">Query JSON documents in the Terminal with GROQ</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/753/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/753/">Using the Platform</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/773/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/773/">JAMstack Tools and The Spectrum of Classification</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/798/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/798/">Buddy on CSS-Tricks</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div></section></div> </article> </div><!-- #content --> <aside id="sidebar" class="sidebar"> <div class="sidebar-content widget-divider-off"> <section id="search-2" class="widget widget_search"> <form class="searchform" role="search" method="get" action="https://skynetch.com/"> <label for="the7-search" class="screen-reader-text">Search:</label> <input type="text" id="the7-search" class="field searchform-s" name="s" value="" placeholder="Type and hit enter …" /> <input type="submit" class="assistive-text searchsubmit" value="Go!" /> <a href="" class="submit"></a> </form> </section><section id="presscore-blog-posts-2" class="widget widget_presscore-blog-posts"><div class="widget-title">Recent posts</div><ul class="recent-posts round-images"><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2505-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2505-2/">Input Masking</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2498-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2498-2/">Web Animation Essentials: CSS Animations and Transitions</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2488-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2488-2/">Lazy-Loading Disqus Comments</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2483-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2483-2/">CSS Shorthand Syntax Considered an Anti-Pattern</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2482-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2482-2/">Google Analytics Can Show You Screen Resolution ? Browser Window</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2479-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2479-2/">Prefer `defer` Over `async`</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li></ul></section><section id="presscore-portfolio-2" class="widget widget_presscore-portfolio"><div class="widget-title">Recent projects</div></section> </div> </aside><!-- #sidebar --> </div><!-- .wf-container --> </div><!-- .wf-wrap --> </div><!-- #main --> <!-- !Footer --> <footer id="footer" class="footer solid-bg"> <div class="wf-wrap"> <div class="wf-container-footer"> <div class="wf-container"> <section id="presscore-custom-menu-one-3" class="widget widget_presscore-custom-menu-one wf-cell wf-1-3"><ul class="custom-menu enable-bold show-arrow"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-328 first"><a href="#!/up">Home</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-329"><a href="#!/about">About Us</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-410"><a href="#!/services">Services</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-331"><a href="#!/team">Team</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-332"><a href="#!/contact">Contact</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-8497"><a href="https://skynetch.com/blog/">Blog</a></li></ul></section><section id="presscore-contact-info-widget-2" class="widget widget_presscore-contact-info-widget wf-cell wf-1-3"><div class="widget-title">Contact Info</div><ul class="contact-info"><li><span class="color-primary">Phone number:</span><br />001 234 56 78</li><li><span class="color-primary">Address:</span><br />SoHo 94 Broadway St New York, NY 1001</li><li><span class="color-primary">Mail:</span><br />hello@dream-theme.com</li><li><span class="color-primary">Business hours:</span><br />Mon. - Fri. 10:00 - 19:00</li></ul><div class="soc-ico"><p class="assistive-text">Find us on:</p><a title="Facebook page opens in new window" href="#" target="_blank" class="facebook"><span class="soc-font-icon"></span><span class="screen-reader-text">Facebook page opens in new window</span></a><a title="Twitter page opens in new window" href="#" target="_blank" class="twitter"><span class="soc-font-icon"></span><span class="screen-reader-text">Twitter page opens in new window</span></a><a title="Dribbble page opens in new window" href="#" target="_blank" class="dribbble"><span class="soc-font-icon"></span><span class="screen-reader-text">Dribbble page opens in new window</span></a><a title="YouTube page opens in new window" href="#" target="_blank" class="you-tube"><span class="soc-font-icon"></span><span class="screen-reader-text">YouTube page opens in new window</span></a></div></section><section id="presscore-contact-form-widget-2" class="widget widget_presscore-contact-form-widget wf-cell wf-1-3"><div class="widget-title">Any questions? Get in touch!</div><form class="dt-contact-form dt-form" method="post"><input type="hidden" name="widget_id" value="presscore-contact-form-widget-2" /><input type="hidden" name="send_message" value="" /><input type="hidden" name="security_token" value="34efe4c56db6a54785ba"/><div class="form-fields"><span class="form-name"><label class="assistive-text">Name *</label><input type="text" class="validate[required]" placeholder="Name *" name="name" value="" aria-required="true"> </span><span class="form-mail"><label class="assistive-text">E-mail *</label><input type="text" class="validate[required,custom[email]]" placeholder="E-mail *" name="email" value="" aria-required="true"> </span><span class="form-telephone"><label class="assistive-text">Telephone</label><input type="text" placeholder="Telephone" name="telephone" value="" aria-required="false"> </span></div><span class="form-message"><label class="assistive-text">Message</label><textarea placeholder="Message" name="message" rows="3" aria-required="false"></textarea> </span><p><a href="#" class="dt-btn dt-btn-m dt-btn-submit" rel="nofollow"><span>Submit</span></a><input class="assistive-text" type="submit" value="submit"></p></form> </section> </div><!-- .wf-container --> </div><!-- .wf-container-footer --> </div><!-- .wf-wrap --> <!-- !Bottom-bar --> <div id="bottom-bar" class="logo-left" role="contentinfo"> <div class="wf-wrap"> <div class="wf-container-bottom"> <div id="branding-bottom"><a class="" href="https://skynetch.com/"><img class=" preload-me" src="https://skynetch.com/wp-content/uploads/2020/07/skynetch_logo_27x27.png" srcset="https://skynetch.com/wp-content/uploads/2020/07/skynetch_logo_27x27.png 27w, https://skynetch.com/wp-content/uploads/2020/07/skynetch_logo_57x57.png 57w" width="27" height="27" sizes="27px" alt="Skynetch" /></a></div> <div class="wf-float-left"> © 2020 Skynetch Custom Software Company </div> <div class="wf-float-right"> <div class="bottom-text-block"><p><span class="paint-accent-color">mail:</span> support@skynetch.com<span class="paint-accent-color" style="padding-left: 20px">tel:</span> +52 55 4351 9960</p> </div> </div> </div><!-- .wf-container-bottom --> </div><!-- .wf-wrap --> </div><!-- #bottom-bar --> </footer><!-- #footer --> <a href="#" class="scroll-top"><span class="screen-reader-text">Go to Top</span></a> </div><!-- #page --> <script type="text/javascript" id="modal"> document.addEventListener("DOMContentLoaded", function(){ startclock(); }); function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; //document.cookie="time=0"; } function showtime () { var now = new Date(); var my = now.getTime() ; now = new Date(my-diffms) ; //document.cookie="time="+now.toLocaleString(); timerID = setTimeout('showtime()',10000); timerRunning = true; } function startclock () { stopclock(); showtime(); } var timerID = null; var timerRunning = false; var x = new Date() ; var now = x.getTime() ; var gmt = 1606468167 * 1000 ; var diffms = (now - gmt) ; </script> <script type="text/javascript" id="info-bar"> document.addEventListener("DOMContentLoaded", function(){ startclock(); }); function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; //document.cookie="time=0"; } function showtime () { var now = new Date(); var my = now.getTime() ; now = new Date(my-diffms) ; //document.cookie="time="+now.toLocaleString(); timerID = setTimeout('showtime()',10000); timerRunning = true; } function startclock () { stopclock(); showtime(); } var timerID = null; var timerRunning = false; var x = new Date() ; var now = x.getTime() ; var gmt = 1606468167 * 1000 ; var diffms = (now - gmt) ; </script> <script type="text/javascript" id="slidein"> document.addEventListener("DOMContentLoaded", function(){ startclock(); }); function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; //document.cookie="time=0"; } function showtime () { var now = new Date(); var my = now.getTime() ; now = new Date(my-diffms) ; //document.cookie="time="+now.toLocaleString(); timerID = setTimeout('showtime()',10000); timerRunning = true; } function startclock () { stopclock(); showtime(); } var timerID = null; var timerRunning = false; var x = new Date() ; var now = x.getTime() ; var gmt = 1606468167 * 1000 ; var diffms = (now - gmt) ; </script> <script type='text/javascript' src='https://skynetch.com/wp-content/themes/dt-the7/js/main.min.js?ver=9.2.2' id='dt-main-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-content/plugins/go_pricing/assets/js/go_pricing_scripts.js?ver=3.3.17' id='go-pricing-scripts-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-content/plugins/dt-the7-core/assets/js/post-type.min.js?ver=2.5.3.1' id='the7-core-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-includes/js/wp-embed.min.js?ver=5.5.3' id='wp-embed-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-content/themes/dt-the7/js/atoms/plugins/validator/jquery.validationEngine.js?ver=9.2.2' id='the7-form-validator-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-content/themes/dt-the7/js/atoms/plugins/validator/languages/jquery.validationEngine-en.js?ver=9.2.2' id='the7-form-validator-translation-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-content/themes/dt-the7/js/dt-contact-form.min.js?ver=9.2.2' id='the7-contact-form-js'></script> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <div class="pswp__bg"></div> <div class="pswp__scroll-wrap"> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)" aria-label="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title="Share" aria-label="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen" aria-label="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out" aria-label="Zoom in/out"></button> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)" aria-label="Previous (arrow left)"> </button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)" aria-label="Next (arrow right)"> </button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div> </body> </html>