{"id":166632170,"date":"2012-05-17T12:53:36","date_gmt":"2012-05-17T12:53:36","guid":{"rendered":"http:\/\/joshdance.me\/case-of-the-phantom-tooltips-solved"},"modified":"2012-05-17T12:53:36","modified_gmt":"2012-05-17T12:53:36","slug":"case-of-the-phantom-tooltips-solved-2","status":"publish","type":"post","link":"http:\/\/joshdance.me\/blog\/case-of-the-phantom-tooltips-solved-2\/","title":{"rendered":"Case of the Phantom Tooltips &#8211; SOLVED"},"content":{"rendered":"<p>I spent just as much time implementing a small feature today, as I took yesterday to build the whole website. \u00a0Sheesh. \ud83d\ude42\u00a0 <\/p>\n<p \/>\n<div>The feature was this: I wanted to have tooltips pop up giving a little more info on the social network site icons. \u00a0Not just any yellow standard tool tips. No sir, I wanted custom tooltips.\u00a0<\/div>\n<div>\n<div class='p_embed p_image_embed'><img loading=\"lazy\" alt=\"No\" height=\"107\" src=\"http:\/\/joshdance.me\/blog\/wp-content\/uploads\/2013\/03\/no.png\" width=\"272\" \/><\/div>\n<p><\/div>\n<div>(None of that standard yellow stuff. Custom or bust.)<\/div>\n<p \/>\n<div>I found this article about <a href=\"http:\/\/aninnovativeweb.tumblr.com\/post\/820491172\/semantic-tooltips-with-pure-css3-and-html5\">tooltips with CSS and HTML5<\/a>. Very nice. \u00a0However, when I implemented it, I got my custom tooltip, AND the standard yellow. \u00a0Not good. \u00a0I then spent a lot of time reading articles and trying different things, working towards perfect tooltips. I learned a lot on the way.\u00a0<\/div>\n<p \/>\n<div>I learned about the\u00a0<a href=\"http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp\">z-index property of CSS<\/a>. \u00a0Basically when items are positioned absolutely, they can overlap. \u00a0The z-index controls which come first. \u00a0The higher the number the higher they are in the stack. \u00a0The items are drawn to the screen in z order from low to high. \u00a0So a z-index: 1, would beat a z-index: -1. \u00a0<\/div>\n<p \/>\n<div>I learned about css positioning. \u00a0The key thing I learned was that you can position things using negative pixels. For example left: -7 is what I used to position the object 7 pixels away from the left edge in the negative direction.\u00a0<\/div>\n<div>\n<div class='p_embed p_image_embed'><a href=\"http:\/\/joshdance.me\/blog\/wp-content\/uploads\/2013\/03\/left_-7.png\"><img loading=\"lazy\" alt=\"Left_-7\" height=\"362\" src=\"http:\/\/joshdance.me\/blog\/wp-content\/uploads\/2013\/03\/left_-7.png?w=300\" width=\"500\" \/><\/a><\/div>\n<p><\/div>\n<div>(Here is my very quick visual representation of this phenomenon.)<\/div>\n<p \/>\n<div>Yes I had learned these bits of knowledge but my original problem of double tooltips was still lurking. \u00a0I kept looking. \u00a0I eventually found <a href=\"http:\/\/css-tricks.com\/css-content\/\">this article from css-tricks<\/a> that basically stated &quot;It won&#039;t work using a title tag.&quot;<\/div>\n<p \/>\n<div>I was not to be deterred. I returned to read the\u00a0<i>original article<\/i> and&#8230;. found the solution. data-tooltip. \u00a0HTML5 can have custom data tags. \u00a0I made my links a certain class and pulled out the custom data and boom baby. \u00a0Custom tooltips.\u00a0<\/div>\n<div>\n<div class='p_embed p_image_embed'><img loading=\"lazy\" alt=\"Yes\" height=\"95\" src=\"http:\/\/joshdance.me\/blog\/wp-content\/uploads\/2013\/03\/yes.png\" width=\"306\" \/><\/div>\n<p><\/div>\n<div>(Beautiful.)<\/div>\n<p \/>\n<div>I had avoided this because <a href=\"http:\/\/html5doctor.com\/html5-custom-data-attributes\/\">css doctor<\/a> says &quot;You shouldn&#039;t use data for CSS styling hooks, because if the data is that important, it should be a presented differently.&quot; \u00a0This is unfortunate because they are right. The tooltip provides a little extra information. \u00a0I belongs in the <i>title tag<\/i>. But this is precisely what causes the double tooltip problem.\u00a0<\/div>\n<p \/>\n<div>So I have spent an hour working on these tooltips. \u00a0I have found a solution, but a nameless faceless standards body says I should not do use the solution. \u00a0<\/div>\n<p \/>\n<div>So I used it. \u00a0A it works wonderfully. \u00a0Check it out <a href=\"http:\/\/tangledlanterns.com\/\">live here<\/a>.\u00a0<\/div>\n<p \/>\n<div>PS &#8211; I think standards are essential and I try to follow them in all the important things. \u00a0For example, screen readers would not read my custom tooltips. But they are not essential to navigation which is why I feel this work around is acceptable for now.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>I spent just as much time implementing a small feature today, as I took yesterday to build the whole website. Sheesh. \ud83d\ude42 The feature was this: I wanted to have tooltips pop up giving a little more info on the social network site icons. Not just an&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/joshdance.me\/blog\/wp-json\/wp\/v2\/posts\/166632170"}],"collection":[{"href":"http:\/\/joshdance.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/joshdance.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/joshdance.me\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/joshdance.me\/blog\/wp-json\/wp\/v2\/comments?post=166632170"}],"version-history":[{"count":0,"href":"http:\/\/joshdance.me\/blog\/wp-json\/wp\/v2\/posts\/166632170\/revisions"}],"wp:attachment":[{"href":"http:\/\/joshdance.me\/blog\/wp-json\/wp\/v2\/media?parent=166632170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/joshdance.me\/blog\/wp-json\/wp\/v2\/categories?post=166632170"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/joshdance.me\/blog\/wp-json\/wp\/v2\/tags?post=166632170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}