无法让 qtip 设置工作

Question

我正在使用 qtip 来制作它，以便将鼠标悬停在 HTML 地图区域上时会出现工具提示。默认情况下，工具提示出现在您悬停的区域上方，但在这种情况下，我希望工具提示出现在不同的区域上方。这是我的代码：

我的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>

我的 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/

问题是使用这段代码我遇到了两个 javascript 错误。 “Uncaught TypeError: Cannot set 属性 'my' of undefined”和“Uncaught TypeError: Cannot set 属性 '0' of未定义"

有什么想法吗？

Answer 1

据我了解，您希望 qtip 在每个区域都打开？不是地图？如果是，请查看 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
    }
});

您为地图中的每个区域实例化 qtip，并设置您希望放置 qtip 的位置。

您可以通过相应地修改 'my' 和 'at' 来更改 how/where 您的 qtips 位置。 qtip 使用 jQuery UI position object, described here

更新：

对于固定数量的区域，您可以使用类似下面的代码：

$('#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/

或者如果您的区域是动态添加的，您可以执行以下操作：

$.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"))
        }
    });
});

无法让 qtip 设置工作

unable to get qtip set working

javascript

jquery

qtip

qtip2