带有链接的jQuery工具提示

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带有链接的jQuery工具提示相关的知识,希望对你有一定的参考价值。

我有一张大图片的产品网格。我希望将鼠标悬停在图像上时出现工具提示。虽然工具提示将需要保持可见,因为其中将包含内容和链接。工具提示将部分位于其各自的大型产品图片的顶部。当用户不在工具提示和产品图像上方时,如何确定隐藏工具提示,而在用户不在工具提示和图像上方时如何显示工具提示?

是否已经有可以处理此问题的jQuery插件?

感谢您的帮助!谢谢!

答案

嘿,我曾经有过这样的问题。尽管不完全是您需要的,但这是我最终使用的。

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();
});

我希望这可以有所帮助。

另一答案

正如another thread中已经建议的那样,工具提示的本机设计依赖于不同的假设,因此,您的行为(允许用户单击其内容的粘性工具提示)并未得到正式支持。

无论如何查看此链接,您都可以使用jQuery Tools实现所需的功能:

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

这是一个独立的演示

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

以上是关于带有链接的jQuery工具提示的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序代码片段

jQuery UI 工具提示不支持 html 内容

高效Web开发的10个jQuery代码片段

jQuery - 如何将 DOM 元素和 Javascript 对象链接在一起?

几条jQuery代码片段助力Web开发效率提升

vscode插件推荐