Case of the Phantom Tooltips – SOLVED

The feature was this: I wanted to have tooltips pop up giving a little more info on the social network site icons.  Not just any yellow standard tool tips. No sir, I wanted custom tooltips. 

(None of that standard yellow stuff. Custom or bust.)

I found this article about tooltips with CSS and HTML5. Very nice.  However, when I implemented it, I got my custom tooltip, AND the standard yellow.  Not good.  I then spent a lot of time reading articles and trying different things, working towards perfect tooltips. I learned a lot on the way. 

I learned about the z-index property of CSS.  Basically when items are positioned absolutely, they can overlap.  The z-index controls which come first.  The higher the number the higher they are in the stack.  The items are drawn to the screen in z order from low to high.  So a z-index: 1, would beat a z-index: -1.  

I learned about css positioning.  The 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. 

(Here is my very quick visual representation of this phenomenon.)

Yes I had learned these bits of knowledge but my original problem of double tooltips was still lurking.  I kept looking.  I eventually found this article from css-tricks that basically stated "It won't work using a title tag."

I was not to be deterred. I returned to read the original article and…. found the solution. data-tooltip.  HTML5 can have custom data tags.  I made my links a certain class and pulled out the custom data and boom baby.  Custom tooltips. 

(Beautiful.)

I had avoided this because css doctor says "You shouldn't use data for CSS styling hooks, because if the data is that important, it should be a presented differently."  This is unfortunate because they are right. The tooltip provides a little extra information.  I belongs in the title tag. But this is precisely what causes the double tooltip problem. 

So I have spent an hour working on these tooltips.  I have found a solution, but a nameless faceless standards body says I should not do use the solution.  

So I used it.  A it works wonderfully.  Check it out live here. 

PS – I think standards are essential and I try to follow them in all the important things.  For 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.