Jquery tooltip Qtip - how can I target a different location for the tooltip

Question

I have installed Qtip and used it for tooltips on a map:

http://www.gregquinn.com/oneworld/about_people6.html

You can rollover the Red Pins and see the tooltip that is there now.

But they want it so that when you rollover the word "Italy" (the text on the left), the same tooltip pops up on the map next to the Red Pin where Italy is.

For the Red Pins on the map, I am using Image Maps with ALT tags to trigger the tooltips like so:

<script class="example" type="text/javascript">
// Create the tooltips only when document ready
$(document).ready(function()
{
// We'll target all AREA elements with alt tags (Don't target the map element!!!)
$('area[alt]').qtip(
{
    content: {
        attr: 'alt' // Use the ALT attribute of the area map for the content
    },
    style: {
        classes: 'ui-tooltip-tipsy ui-tooltip-shadow ui-tooltip-light'
    }
});
});
</script>

The Qtip documentation says you can target a position (position: { target: $('ul:first li:last') }) but I do not know how to do that or can I target Map coordinates and have all of these exist on one page?

Answer 1

You should be able to use a hover event on the text in the left that triggers the show method of the specific qtip that you want to target.

In your html, you should add a class to your links and also add a data attribute.

<span class="qt-pointer" data-country="italy">Italy</span>
<span class="qt-pointer" data-country="kenya">Kenya</span>

The javascript would go something like this:

$('.qt-pointer').hover(function () {
  // on hover
  $('#' + $(this).data('country')).qtip("show");
}, function () {
  // on exit
  $('#' + $(this).data('country')).qtip("hide");
});

Your qtip areas should have ids that correspond to the data-country attribute of the qt-pointers. I haven't used qtip, so treat the above code as pseudocode. Hope it is helpful in solving your problem.