工具提示悬停闪烁

时间:2013-06-16 03:30:25

标签: javascript jquery twitter-bootstrap

我正在尝试添加工具提示(通过Bootstrap),这样当您将鼠标悬停在图像上时,它会在500毫秒延迟后显示工具提示。图像具有常规状态和悬停状态:

CSS:

.image {
  background-image: url('../img/test.png');
  background-repeat: no-repeat;
  opacity: 0.3;
  filter: alpha(opacity=30);
}

.image:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

HTML:

<div class="image"></div>

JavaScript的:

$('.image').tooltip({title: 'Text', delay: { show: 500, hide: 0 }, trigger: 'hover', html: true});

问题在于,当我将鼠标悬停在图像上以检查工具提示时,图像会闪烁,而不会显示工具提示,如下所示:

http://i.imgur.com/S6YvXFT.gif

1 个答案:

答案 0 :(得分:0)

似乎工作得很好。你是不是不包括jQuery,或者因为你忘了分配一个高度和宽度,它会突然出现在你不期望的地方?

jsfiddlehttp://jsfiddle.net/8S7kP/1/