1

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

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

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

但他们想要这样，当您将“意大利”一词（左侧的文字）滚动时，相同的工具提示会在地图上意大利所在的红色大头针旁边弹出。

对于地图上的红色图钉，我使用带有 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文档说您可以定位一个位置（position: { target: $('ul:first li:last') }），但我不知道该怎么做，或者我可以定位地图坐标并将所有这些都存在于一个页面上？

4

1 回答 1

0

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

在您的 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 指针的 data-country 属性相对应的 id。我没用过qtip，所以把上面的代码当作伪代码。希望对解决您的问题有所帮助。

于 2012-05-26T00:28:38.097 回答