jQuery Popup Bubble/Tooltip

Question

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

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

Answer 1

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

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

Answer 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){          
    $('<div class="tooltip">test</div>').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});
};

Answer 3

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

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