Question

I am new to JavaScript and qTip and I can’t manage to do something. I have a table with images and I need a qTip with the image’s description for each one of them. I load the images and the content from the database. How do I write this? From what I’ve read I need to add the description to a hidden div and access the div from the JavaScript function. The only problem is I don’t know how. Cold you please show me how to do this?

Answer 1

Assuming that your HTML markup looks more or less like this:

<td>
    <img title="First img">
</td>
<td>
    <img title="Second img">
</td>

Here’s what you can do:

$('td').each(function() {
    var img = $('img', this);
    $(this).qtip({
        content: img.attr('title'),
        show: 'mouseover',
        hide: 'mouseout',
        position: {
             target: 'topMiddle',
             tooltip: 'bottomMiddle'
        }
    });
});

The idea is to go through all holders, get the underlying image and the tooltip content (in this case img.attr('title')) and generate tooltip with this custom content.