Question

我已经安装了Qtip并将其用于地图上的工具提示：

http://www.gregquinn.com/oneworld/about_people6.html

您可以翻转红色针脚并查看现在的工具提示。

但是他们想要这样，当你翻转“意大利”这个词时（左边的文字），同样的工具提示会弹出意大利所在的Red Pin旁边的地图上。

对于地图上的红色针脚，我使用带有ALT标签的图像映射来触发工具提示，如下所示：

<script class="example" type="text/javascript">
// Create the tooltips only when document ready
$(document).ready(function()
{
// We'll target all AREA elements with alt tags (Don't target the map element!!!)
$('area[alt]').qtip(
{
    content: {
        attr: 'alt' // Use the ALT attribute of the area map for the content
    },
    style: {
        classes: 'ui-tooltip-tipsy ui-tooltip-shadow ui-tooltip-light'
    }
});
});
</script>

Qtip documentation表示您可以定位一个位置（position: { target: $('ul:first li:last') }），但我不知道该怎么做，或者我可以定位地图坐标并将所有这些都存在于一个页面上？

Answer 1

您应该能够在左侧的文本中使用hover事件来触发您要定位的特定qtip的show方法。

在你的html中，你应该在你的链接中添加一个类，并添加一个数据属性。

<span class="qt-pointer" data-country="italy">Italy</span>
<span class="qt-pointer" data-country="kenya">Kenya</span>

javascript会是这样的：

$('.qt-pointer').hover(function () {
  // on hover
  $('#' + $(this).data('country')).qtip("show");
}, function () {
  // on exit
  $('#' + $(this).data('country')).qtip("hide");
});

你的qtip区域应该有与qt-pointers的data-country属性相对应的id。我没有使用qtip，所以将上面的代码视为伪代码。希望它有助于解决您的问题。

Jquery工具提示Qtip - 如何为工具提示定位不同的位置

1 个答案: