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错误。＆＃34; 未捕获的TypeError：无法设置属性＆＃39; my＆＃39;未定义的＆＃34;和＆＃34; 未捕获的TypeError：无法设置属性＆＃39; 0＆＃39;未定义的＆＃34;

有什么想法吗？

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的位置。

您可以通过相应地修改“我的”和“at”来更改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设置工作

1 个答案: