Jquery工具提示Qtip -如何将工具提示定位到不同的位置
Jquery工具提示Qtip -如何将工具提示定位到不同的位置
提问于 2012-05-26 07:17:20
我已经安装了Qtip，并将其用于地图上的工具提示：
http://www.gregquinn.com/oneworld/about_people6.html
您可以将鼠标悬停在红色图钉上并查看现在的工具提示。
但是他们想要它，这样当你将鼠标移到单词“意大利”(左边的文本)上时，同样的工具提示就会出现在地图上意大利所在的红色引脚旁边。
对于地图上的Red Pins，我使用带有ALT标签的Image Maps来触发工具提示，如下所示：
<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') })，但我不知道该怎么做，或者我可以定位地图坐标并将所有这些都放在一个页面上吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-05-26 08:28:38
您应该能够在左侧的文本上使用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属性的ids。我没有使用过qtip，所以把上面的代码当作伪代码。希望这对解决你的问题有帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10762363
复制相关文章
相似问题
腾讯云开发者
