I have an image map that lists points of interests below the map. I'd like a tooltip to appear on the map when a point of interest is rolled over. I think it should be possible because I have matching classnames in the css. Here is what I have so far (doesn't work)...
JS Code
$('#button-list a[href][title]').each(function()
{
var classname = $(this).attr('class');
$('#map').find('li.' + classname).qtip({
content: {
text: 'Test',
}
}
});
});
Any ideas how to get this working would be really appreciated!
Do you want the imagemap area element to trigger the tooltip too, or just the legend below it?
Both. The hovers on the map are all set, but I'd like to have the legend highlight the tooltip on the map as well.
Ok so assuming the <area> element has the same class on it as the legend that also triggers it, you can just do this:
JS Code
$('area').each(function() {
var targets = $('#button-list a.' + $(this).attr('class')).add(this);
$(this).qtip({
show: {
target: targets
},
hide: {
target: targets
}
})
});
First off, thanks for the help. I'm getting much closer. Here is my current code:
$('.button-list a[href][title]').each(function() {
var targets = $('#map li.' + $(this).attr('class')).add(this);
$(this).qtip({
content: { text: false },
style: { name: 'myTooltip' },
show: { target: targets },
hide: { target: targets }
})
});
With this code the tooltip shows, but it's over the legend below the map (and not the map). I must have mixed something up, but I tried other arrangements with no success. The button-list class is the links below the map in the legend and the map id is the map above the legend. Any ideas where I went wrong?
Ah you might need to use qTip2 for this, as it supports using 'event' for the position.target, which (iirc) qTip 1.0 doesn't support. Upgrade and try this out:
JS Code
$('.button-list a[href][title]').each(function() {
var targets = $('#map li.' + $(this).attr('class')).add(this);
$(this).qtip({
content: { text: false },
style: { name: 'myTooltip' },
position: { target: 'event' },
show: { target: targets },
hide: { target: targets }
})
});