Question

我想将醉意的工具提示用作工具栏。当悬停链接时，我希望工具栏显示，让我们说一个div，当进入工具栏区域时，我希望它保持可见，而不是隐藏。所以我的问题是：

如何显示隐藏的div？
如何在进入工具提示区域时保持工具提示可见？

Answer 1

Tipsy支持“手动”触发。所以你要做的就是让你的链接上的“onmouseover”事件调用tipsy('show')函数，然后对于隐藏部分，那么......可能做两件事：当你做你的节目时，设置超过x秒后自动隐藏的超时。然后还为您的工具提示设置一个onmouseout事件，调用tipsy('hide')。

编辑：将代码更改为实际可用的内容，请参阅此处：http://jsfiddle.net/6FpM8/3/感谢@Josh让我开始工作。

var timer;

//setup the toolbar and tipsy
$('#mylink').attr('title','Input here:<input id="toolbar">');
$('#mylink').tipsy({trigger:'manual',gravity:'w', html:true});

//.tipsy class is what the generated tooltip divs have, so we use the 
//live event to link the mouseover/mouseout events
$('.tipsy').live('mouseover',function(e){
  clearTimeout(timer);
});
$('.tipsy').live('mouseout',function(e){
  timer = setTimeout("$('#mylink').tipsy('hide');",3000);//hide the link in 3 seconds
});

//manually show the tooltip
$('#mylink').bind('mouseover',function(e){
   $(this).tipsy('show');
 });

Answer 2

我是通过改变Tipsy本身来做到这一点的。 Tipsy在Tipsy.prototype的show方法中将tooltip元素附加到document.body：

$tip.remove().css({
    top: 0, 
    left: 0, 
    visibility: 'hidden', 
    display: 'block'}).appendTo(document.body);

如果您将提示更改为触发元素的子项，那么如果您在工具提示中，则jQuery mouseleave将不会触发：

$tip.remove().css({
    top: 0, 
    left: 0, 
    visibility: 'hidden', 
    display: 'block'}).appendTo(this.$element[0]);

在我的情况下，我有一个div，其title属性包含提示，而div包含用户所定位的图像。（我不知道如果持有尖端的元素没有像孩子一样没用，就行了。）我在div上启用了Tipsy。

当鼠标悬停时，保持Tipsy工具提示逐渐淡出

2 个答案: