onmouseover 事件触发时弹出，并会在鼠标停留在引发 onmouseover 事件的项目上或者鼠标移动到气泡内时保持打开状态。我的气泡需要拥有各种HTML和样式，包括超链接、图片等。Qtip是我见过最好的工具提示插件。 它采用MIT许可证，美观易用，具备所有必要的配置。
我最喜欢的轻量级选项是tipsy。它同样采用MIT许可证，并启发了Bootstrap的工具提示插件的设计。
这也可以很容易地通过鼠标悬停事件完成。我已经做过了，根本不需要200行代码。首先触发事件，然后使用一个函数来创建工具提示。
$('span.clickme').mouseover(function(event) {
createTooltip(event);
}).mouseout(function(){
// create a hidefunction on the callback if you want
//hideTooltip();
});
function createTooltip(event){
$('<div class="tooltip">test</div>').appendTo('body');
positionTooltip(event);
};
function positionTooltip(event){
var tPosX = event.pageX - 10;
var tPosY = event.pageY - 100;
$('div.tooltip').css({'position': 'absolute', 'top': tPosY, 'left': tPosX});
};
'top': tPosY + 'px' 等等。 - Robusto好的，经过一些工作，我能够在所有正确的时间弹出并消失一个“气泡”。还需要进行大量的样式处理，但这基本上是我使用的代码。
<script type="text/javascript">
//--indicates the mouse is currently over a div
var onDiv = false;
//--indicates the mouse is currently over a link
var onLink = false;
//--indicates that the bubble currently exists
var bubbleExists = false;
//--this is the ID of the timeout that will close the window if the user mouseouts the link
var timeoutID;
function addBubbleMouseovers(mouseoverClass) {
$("."+mouseoverClass).mouseover(function(event) {
if (onDiv || onLink) {
return false;
}
onLink = true;
showBubble.call(this, event);
});
$("." + mouseoverClass).mouseout(function() {
onLink = false;
timeoutID = setTimeout(hideBubble, 150);
});
}
function hideBubble() {
clearTimeout(timeoutID);
//--if the mouse isn't on the div then hide the bubble
if (bubbleExists && !onDiv) {
$("#bubbleID").remove();
bubbleExists = false;
}
}
function showBubble(event) {
if (bubbleExists) {
hideBubble();
}
var tPosX = event.pageX + 15;
var tPosY = event.pageY - 60;
$('<div ID="bubbleID" style="top:' + tPosY + '; left:' + tPosX + '; position: absolute; display: inline; border: 2px; width: 200px; height: 150px; background-color: Red;">TESTING!!!!!!!!!!!!</div>').mouseover(keepBubbleOpen).mouseout(letBubbleClose).appendTo('body');
bubbleExists = true;
}
function keepBubbleOpen() {
onDiv = true;
}
function letBubbleClose() {
onDiv = false;
hideBubble();
}
//--TESTING!!!!!
$("document").ready(function() {
addBubbleMouseovers("temp1");
});
</script>
这是一个与之对应的HTML片段：
<a href="" class="temp1">Mouseover this for a terribly ugly red bubble!</a>
QTip在使用jQuery 1.4.2时存在缺陷。我不得不转换到jQuery气泡弹出框http://www.vegabit.com/jquery_bubble_popup_v2/#examples，现在它运行良好！
听起来你不想要鼠标悬停事件: 你想要jQuery hover()事件。
而你似乎想要一个“丰富”的工具提示，这种情况下我建议使用jQuery tooltip。通过bodyHandler选项，你可以放置任意HTML内容。