Image tool tip on hover WordPress

Duncan O'Neill answers:

Hi Kirk,

the script below needs no extra js calls other than the jquery already called. I tested this below with jquery version 1.4.2, which I think ships with the latest WP.

This is for a table with the class of hoverTable. As you can see, it creates a new span element after each link within a td in the table. That span element will show on hover. All you need to do is style it.

Please let me know if this needs polishing, or refining.

<script src="js/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {

$("table.hoverTable td a").after("<span class='tooltip'>text</span>");// create the span element
$("table.hoverTable td span").hide(); // hide it
$("table.hoverTable td a", this).hover(function(){ // set up hover for the links

if ($(this).next().css('display')=='none'){ // test if the span is displayed
$(this).next().show(); // if not show it
}
else {
$(this).next().hide(); // if so hide it
}
});
});

</script>
<style type="text/css">
table.hoverTable td span {
background:url('your image');
}
</style>

UPDATED CODE SENT;

<script type="text/javascript">
jQuery(document).ready(function ($) {

$('table.hoverTable td a').each(function(index) {

$(this).after("<span class='tooltip'><img src='image-"+index+"'</span>");// create the span element
$(this).next().hide();

$(this).hover(function(){

if ($(this).next().css('display')=='none'){ // test if the span is displayed
$(this).next().show(); // if not show it
}
else {
$(this).next().hide(); // if so hide it
}
});
});
});

</script>

---