无法使 qtip 集正常工作

unable to get qtip set working

本文关键字：工作 常工作 qtip      更新时间：2023-09-26

我正在使用 qtip 来制作它，以便将鼠标悬停在 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错误。"未捕获的类型错误：无法设置未定义的属性'my'"和"未捕获的类型错误：无法设置未定义的属性'0'

有什么想法吗？

根据我的理解，您希望 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"来更改 qtips 的定位方式/位置。 qtip 使用 jQuery UI 位置对象，描述如下

更新：

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

$('#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"))
        }
    });
});
相关文章：