jQuery Popup Bubble/Tooltip

我正在尝试制作一个可以在onmouseover事件被触发时弹出的"气泡",只要鼠标悬停在抛出onmouseover事件的项目上或者鼠标移动到气泡中,它就会保持打开状态.我的泡泡需要具备HTML和样式的所有方式,包括超链接,图像等.

我基本上通过编写大约200行丑陋的JavaScript来完成这个,但我真的想找到一个jQuery插件或其他一些方法来清理它.

1> Koobz..：

---

Qtip是我见过的最好的.这是麻省理工学院许可,美观,具有您需要的所有配置.

我最喜欢的轻量级选项是醉意的.麻省理工学院也许可.它启发了Bootstrap的工具提示插件.

---

到目前为止最好的.一行代码与其他人提供的所有其他巨大解决方案相比.我希望这个回应得到投票.

---

我今天看了Qtip,虽然它确实有效,但有一些不利的方面:暂时没有更新,缺少或没有记录一些明显的事情(想要使用在提示时调用的函数构建工具提示文本显示)并且是一个沉重的下载(部分原因是它似乎包括很多东西,如圆角样式).希望不被视为消极 - 只是试图挽救别人一些时间.绝对值得考虑,但有一些缺点.

---

@Cymen,我无法谈论大约在10月9日的情况,但你所说的都不再是真的.它是:活跃的,有良好的文档记录,并允许非常可定制的下载大小和jQuery UI.

---

Qtip与jQuery 1.4+存在兼容性问题.简单的单行修复qTip插件修复了它.请看:http://craigsworks.com/projects/forums/thread-solved-qtip-1-0-0rc3-does-not-work-with-latest-jquery-release

2> 小智..：

---

这也可以通过mouseover事件轻松完成.我已经做到了,它根本不需要200行.首先触发事件,然后使用将创建工具提示的函数.

$('span.clickme').mouseover(function(event) {
    createTooltip(event);               
}).mouseout(function(){
    // create a hidefunction on the callback if you want
    //hideTooltip(); 
});

function createTooltip(event){          
    $('
test
').appendTo('body');
    positionTooltip(event);        
};

然后创建一个函数,使用触发鼠标悬停事件的DOM元素的偏移位置定位工具提示,这对css是可行的.

function positionTooltip(event){
    var tPosX = event.pageX - 10;
    var tPosY = event.pageY - 100;
    $('div.tooltip').css({'position': 'absolute', 'top': tPosY, 'left': tPosX});
};

3> Bozho..：

---

虽然qTip(接受的答案)很好,但我开始使用它,它缺少我需要的一些功能.

然后我偶然发现了PoshyTip - 它非常灵活,而且非常易于使用.(我可以做我需要的)