Question

我有一个产品的大图像网格。我希望在翻转图像时显示工具提示。虽然工具提示需要保持可见，因为内部会有内容和链接。工具提示将部分位于其各自的大型产品图像之上。当用户未在工具提示和产品图像上时，如何确定隐藏工具提示，并在用户位于工具提示和图像上时显示工具提示？

是否有一个jQuery插件可以处理这个？

任何帮助表示赞赏！谢谢！

Answer 1

嘿，我曾经有过像这样的问题。虽然不完全是你需要的，但这是我最终使用的。

var over_picker = false; //var to store state of over or not over

$('.list_picker').live('mouseover mouseout', function(event){ 
if (event.type == 'mouseover') {
    over_picker=true;
    console.log('inside');
}else{ 
    over_picker=false; 
    console.log('outside');
}
});
$('body').live('click', function(){ 
if(! over_picker) $('.list_picker').hide();
});

我希望这可以提供一些帮助。

Answer 2

是否有一个jQuery插件可以处理这个？

是的！有一个名为qTip2的jQuery插件可以很好地完成这个任务。

修改

Here is a demo用户点击该链接，并且提示会一直打开，直到您将其关闭为止。它也可以配置为在鼠标离开时使用悬停而不是单击和关闭。

More qTip2 demos here

Full qTip2 documentation here

Answer 3

正如another thread中已经提到的，工具提示的原生设计依赖于不同的假设，因此您需要的行为（允许用户点击其内容的粘性工具提示）不受官方支持。

无论如何看这个链接你可以看到使用jQuery Tools实现你需要的东西是可能的：

http://jquerytools.org/demos/tooltip/any-html.html

这是一个独立的演示

http://jquerytools.org/demos/tooltip/any-html.htm

带有链接的jQuery工具提示

3 个答案: