{"id":179,"date":"2010-09-09T13:57:54","date_gmt":"2010-09-09T12:57:54","guid":{"rendered":"http:\/\/www.cotsweb.com\/blog\/?p=179"},"modified":"2010-09-09T13:57:54","modified_gmt":"2010-09-09T12:57:54","slug":"styling-abbr-tags-and-displaying-tooltips","status":"publish","type":"post","link":"https:\/\/www.cotsweb.com\/blog\/styling-abbr-tags-and-displaying-tooltips-179.html","title":{"rendered":"Styling &lt;abbr&gt; tags and displaying tooltips"},"content":{"rendered":"<p>I have been working on a site which includes some abbreviations so I thought the obvious thing to do was to use the HTML abbr tag to explain them.<\/p>\n<p>Nice browsers like Opera and Firefox display abbreviations with a blue dashed line underneath, when you hover over the text a tooltip pops up to display the title text of the abbreviation.  So you can do something like this to expand an abbreviation<\/p>\n<p><pre><code class=\"preserve-code-formatting\">\n&lt;abbr title=&quot;Hyper Text Markup Language&quot;&gt;HTML&lt;\/abbr&gt;\n<\/code><\/pre><\/p>\n<p> Chrome &amp; Safari offer the tooltip feature but don&#8217;t show the dashed underlining unless you provide a style for the abbr tag.  Internet Explorer is different again, IE7 &#038; IE8 will display the tooltips (but not very reliably) but ignore the styling, IE6 doesn&#8217;t do anything.<\/p>\n<p>To get <abbr> working properly in all browsers I thought I would try adding a class to each tag to see if Internet Explorer liked that.  I had already styled the <em>abbr<\/em> element to keep Chrome &amp; Safari happy so I just added a selector for a new abbr class to the existing style.<\/p>\n<p><pre><code class=\"preserve-code-formatting\">abbr, .abbr {\nborder-bottom-style: dashed;\nborder-bottom-width: 1px;\nborder-bottom-color: blue;\n}<\/code><\/pre><\/p>\n<p>It worked better than I could have hoped, I didn&#8217;t need to add <em>class=&#8221;abbr&#8221;<\/em> to any of my html abbr tags at all.  It seems that just declaring a style for a class of .abbr makes Internet Explorer work like the other browsers.  And as a real bonus it also works in IE6 and IE8 behaves more consistently too!<\/p>\n<p>I don&#8217;t know why this works and perhaps I am not the first to discover this but I thought it was worth sharing.<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>I have been working on a site which includes some abbreviations so I thought the obvious thing to do was to use the HTML abbr tag to explain them. Nice browsers like Opera and Firefox display abbreviations with a blue dashed line underneath, when you hover over the text a tooltip pops up to display [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[33,103,18],"tags":[105,138,34,149,35,104,62],"_links":{"self":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts\/179"}],"collection":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/comments?post=179"}],"version-history":[{"count":7,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts\/179\/revisions"}],"predecessor-version":[{"id":186,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts\/179\/revisions\/186"}],"wp:attachment":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/media?parent=179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/categories?post=179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/tags?post=179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}