带有链接的 jQuery 工具提示

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插件可以很好地完成此任务。

编辑：

这是一个演示 ，其中用户单击链接，提示保持打开状态，直到您将其关闭。 还可以将其配置为在鼠标离开时使用悬停而不是单击并关闭。

更多qTip2演示在这里 。

完整的qTip2文档在这里 。

Answer 3

正如在另一个线程中已经建议的那样，工具提示的本机设计依赖于不同的假设，因此您需要的行为（允许用户单击其内容的粘性工具提示）不受官方支持。

无论如何，查看此链接，您可以看到使用 jQuery 工具可以实现您需要的功能：

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

这是一个独立的演示

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