{"id":556,"date":"2009-07-14T14:05:51","date_gmt":"2009-07-14T22:05:51","guid":{"rendered":"http:\/\/blog.mozilla.org\/webdev\/?p=556"},"modified":"2017-03-08T14:50:05","modified_gmt":"2017-03-08T22:50:05","slug":"fun-with-tooltips","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/","title":{"rendered":"Fun with Tooltips"},"content":{"rendered":"<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/blog.mozilla.org\/webdev\/files\/2009\/07\/picture-1.png\" alt=\"Tooltips example\" title=\"Tooltips example\" width=\"246\" height=\"127\" class=\"size-full wp-image-571\" \/><\/p>\n<p>A long time ago, at a <a href=\"http:\/\/www.yahoo.com\">far away company<\/a>, I was given a project that required a not-so-usual use of tooltips. I had to implement multi-line tooltips like so:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/blog.mozilla.org\/webdev\/files\/2009\/07\/multi-line.png\" alt=\"multi-line tooltip\" title=\"multi-line tooltip\" width=\"392\" height=\"113\" class=\"size-full wp-image-557\" srcset=\"https:\/\/blog.mozilla.org\/webdev\/files\/2009\/07\/multi-line.png 392w, https:\/\/blog.mozilla.org\/webdev\/files\/2009\/07\/multi-line-300x86.png 300w\" sizes=\"(max-width: 392px) 100vw, 392px\" \/><\/p>\n<p>Luckily it only had to work in IE, and line breaks for tooltips in IE are just normal linebreaks in HTML, so nothing too complicated. But this got me thinking, what else is possible with tooltips? What are the limitations of tooltips? Is there any consistency between browsers?<\/p>\n<p>I&#8217;ve setup a <a href=\"http:\/\/people.mozilla.org\/~rdoherty\/tooltips.html\">test page<\/a> with all my tests. I tried to test everything from max-lengths, line breaks, tabs, html, UTF-8 characters to just lots of spaces. <\/p>\n<p>Some interesting things I found out are some browsers will truncate (Opera, IE), some allow tabs and linebreaks (IE) and some don&#8217;t (Opera). I won&#8217;t list them all, check out the compatibility table that&#8217;s in the <a href=\"http:\/\/people.mozilla.org\/~rdoherty\/tooltips.html\">test page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A long time ago, at a far away company, I was given a project that required a not-so-usual use of tooltips. I had to implement multi-line tooltips like so: Luckily it only had to work in IE, and line breaks &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/\">Continue reading<\/a><\/p>\n","protected":false},"author":1438,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[288],"tags":[],"coauthors":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Fun with Tooltips - Mozilla Web Development<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"mozilla\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/\",\"name\":\"Fun with Tooltips - Mozilla Web Development\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2009\/07\/picture-1.png\",\"datePublished\":\"2009-07-14T22:05:51+00:00\",\"dateModified\":\"2017-03-08T22:50:05+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/70ae25c16f09d053c6d8b5eac29dbda9\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/#primaryimage\",\"url\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2009\/07\/picture-1.png\",\"contentUrl\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2009\/07\/picture-1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/webdev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fun with Tooltips\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/\",\"name\":\"Mozilla Web Development\",\"description\":\"For make benefit of glorious tubes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/70ae25c16f09d053c6d8b5eac29dbda9\",\"name\":\"mozilla\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/e77ee64829d0c3831212656324f746d1\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/75d2017e019c87560fe5d148a64659dc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/75d2017e019c87560fe5d148a64659dc?s=96&d=mm&r=g\",\"caption\":\"mozilla\"},\"url\":\"https:\/\/blog.mozilla.org\/webdev\/author\/mozilla-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fun with Tooltips - Mozilla Web Development","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/","twitter_misc":{"Written by":"mozilla","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/","url":"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/","name":"Fun with Tooltips - Mozilla Web Development","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/#primaryimage"},"thumbnailUrl":"http:\/\/blog.mozilla.org\/webdev\/files\/2009\/07\/picture-1.png","datePublished":"2009-07-14T22:05:51+00:00","dateModified":"2017-03-08T22:50:05+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/70ae25c16f09d053c6d8b5eac29dbda9"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/#primaryimage","url":"http:\/\/blog.mozilla.org\/webdev\/files\/2009\/07\/picture-1.png","contentUrl":"http:\/\/blog.mozilla.org\/webdev\/files\/2009\/07\/picture-1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/webdev\/2009\/07\/14\/fun-with-tooltips\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/webdev\/"},{"@type":"ListItem","position":2,"name":"Fun with Tooltips"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/webdev\/#website","url":"https:\/\/blog.mozilla.org\/webdev\/","name":"Mozilla Web Development","description":"For make benefit of glorious tubes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/70ae25c16f09d053c6d8b5eac29dbda9","name":"mozilla","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/e77ee64829d0c3831212656324f746d1","url":"https:\/\/secure.gravatar.com\/avatar\/75d2017e019c87560fe5d148a64659dc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/75d2017e019c87560fe5d148a64659dc?s=96&d=mm&r=g","caption":"mozilla"},"url":"https:\/\/blog.mozilla.org\/webdev\/author\/mozilla-2\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/556"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/users\/1438"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/comments?post=556"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/556\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/media?parent=556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/categories?post=556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/tags?post=556"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/coauthors?post=556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}