Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Image tool tip on hover WordPress

  • SOLVED

I want to place an image up on the screen as a tool tip or a lightbox when a user hovers over a few words of text.

The text can be set as a link or it can be just enclosed in a span class - whatever works best etc....

There are 20 lines of text in individual cells in a table and I have 20 associated images to assign to them.

I have tried using the jquery qtip tooltip plugin but my knowledge of jquery is not sufficient to make it work.

Answers (2)

2010-09-15

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>


Kirk O'Connor comments:

thanks for the code.

All I get when I hover over the link in the TD is "text" in a popup.

It is a pizza site and I want to view a picture of the anchovies pizza when I hover over the "pizza with anchovies" link and a picture of the pepperoni pizza when I hover over the "pizza with pepperoni" link

2010-09-13

Denzel Chia answers:

Hi,

I had downloaded a copy of jQuery tooltip plugin from tutorialzine.
I had modified it to display image instead of title text.

Just set up an link to the image. Like this,

<a href='http://example/image.jpg'>link text</a>

The plugin will use the image href to construct the tooltip.

Please download the zip file from the below link, unzip and test out colortip.html

http://development.mylittleqq.com/colortips.zip

Hope it works for you!

Please get back to me if you have any problem.

Thanks.


Kirk O'Connor comments:

this sort of works except for the fact that the images actually display when the page is loaded then go away and come back when I hover over the link.

What might I have got wrong ?