Super simple CSS tooltip in a table, why is it not displaying and can I make it work?

Question

Hi, I have been trying to implement many different tooltips on this page for my client, he's adamant that we have a picture of the product show up when you hover over the product name in the order page. I decided to use the super simple CSS tooltip, it's very easy to implement and does exactly what we want. It works on a dynamic page, the others I tried didn't.

I have made an example here: CSS tooltip in table example.<-- updated to remove errors.

This page used to be displayed using divs, I have since changed it to a table, as it's tabular data and easier to work with. It worked fine when it used divs, now it's in a table, it won't display the span on hover.

My questions are:

1. Why is it not working?

2. How can I make it work?

3. If not, does anyone know another super easy to implement tooltip that can work properly on a dynamic page?

Here's the DIV tooltip for reference: DIV display tooltip.

Edit: Just noticed it kinda half works in IE8.

Update: It's now working in all browsers, thanks to Daniel pointing out my CSS errors, but is there a way to make it display outside of the table cell?

PAge is at: here

Thanks.

Answer 1

I have checked your code, and as you can see by the jsfiddle sytax hightlighting there are a lot of errors in your code: for example the span you who starts in your a finishes outside your a. The CSS should work like this. There are a few more errors. i think if you correct them its gonna work. (simply pass the w3c check, then anything should be just fine)

edit: i missed a thing your link should be position: relative; because your tooltip is position: absolute, the absolute always is relative to the last relative parent.

also remove the opacity: 0 in your original span

Answer 2

You seem to have a problem with CSS. Simply using styles of the working JSFiddle demo should fix it. You had the span set as display:none, however it looks like this tooltip works by hiding the image from the screen, using left:-999px.

Check this: http://jsfiddle.net/WNzhJ/

Answer 3

Find a more readable working solution here: http://jsfiddle.net/n9GdP/1/