unable to get qtip set working

Question

I'm using qtip to make it so that hovering over an HTML map area results in a tooltip appearing. By default the tooltip appears right over the area you're hovering over but in this case I want the tooltip to appear over a different area. Here's my code:

My HTML:

<img src="http://www.frostjedi.com/terra/shapes.jpg" usemap="#map1">

<map name="map1" id="map1">
  <area id="portal1" shape="circle" coords="35,35,33" class="portal" data-target="portal2">
  <area id="portal2" shape="rect" coords="85,0,148,62" class="portal" data-target="portal1">
</map>

My JS:

$('#map1').qtip({
    content: {
        text: 'Support for area maps with no extra configuration! Awesome.'
    }
});
map1 = $('#map1').qtip('api');
$('.portal').mouseover(function() {
    var coords = $('#' + $(this).attr('data-target')).attr('coords');
    coords = coords.split(',').slice(0,1).join(',');
    map1.set('position.my', coords);
});

JSFiddle: http://jsfiddle.net/exk3kgtz/

The problem is that with this code I'm getting two javascript errors. "Uncaught TypeError: Cannot set property 'my' of undefined" and "Uncaught TypeError: Cannot set property '0' of undefined"

Any ideas?

Answer 1

From my understanding you want the qtip to open over each area? not the map? If so please take a look at http://jsfiddle.net/exk3kgtz/4/.

$('#map1 area').qtip({
    content: {
        text: 'Support for area maps with no extra configuration! Awesome.'
    },
    position:{
        my:'left center', // qtip's left middle point
        at:'center' // will be positioned at the target area's center
    }
});

You instantiate qtip for every area in the map and set wherever you want your qtip positioned.

You can change how/where your qtips are positioned by modifying 'my' and 'at' accordingly. qtip uses jQuery UI position object, described here

UPDATE:

For fixed number of areas you could use something like the below code:

$('#portal1').qtip({
    content: {
        text: 'Support for area maps with no extra configuration! Awesome.'
    },
    position:{
        my:'left top',
        at:'right bottom',
        target: $("#portal2")
    }
});
$('#portal2').qtip({
    content: {
        text: 'Support for area maps with no extra configuration! Awesome.'
    },
    position:{
        my:'left top',
        at:'right bottom',
        target: $("#portal1")
    }
});

http://jsfiddle.net/exk3kgtz/9/

Or if your areas are dynamically added, you could do the following:

$.each($('#map1 area'), function(key, element){
    $(element).qtip({
        content: {
            text: 'Support for area maps with no extra configuration! Awesome.'
        },
        position:{
            my:'left top',
            at:'right bottom',
            target: $("#"+$(element).data("target"))
        }
    });
});