jQuery的工具提示Qtip - 我怎么可以针对不同的位置

Question

我已经安装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 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三分球的数据，国家属性ID。我没有使用qtip，因此将上面的代码视为伪代码。希望它有助于解决您的问题。