带有链接的jQuery工具提示

Posted 2021-04-09

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

是否已经有可以处理此问题的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