jQuery Popup Bubble / Tooltip
我试图做一个“泡泡”，可以在onmouseover事件被触发时popup，只要鼠标hover在投掷onmouseover事件的项目上，或者如果鼠标移动到泡泡中，将保持打开状态。 我的泡泡需要有HTML和样式的所有方式，包括超链接，图像等。
我已经基本完成了这个约200行的丑陋的JavaScript，但我真的很想find一个jQuery插件或其他方式来清理这一点。
Qtip是我见过的最好的一个。 这是麻省理工学院许可，美丽，拥有所有你需要的configuration。
我最喜欢的轻量级选项是醉意 。 麻省理工学院也许可 它启发了Bootstrap的工具提示插件 。
这也可以通过mouseover事件轻松完成。 我已经完成了，根本不需要200行。 从触发事件开始，然后使用将创build工具提示的函数。
$('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); };
然后你创build一个函数来定位工具提示，触发mouseover事件的DOM元素的偏移位置，这是可以与CSS。
function positionTooltip(event){ var tPosX = event.pageX - 10; var tPosY = event.pageY - 100; $('div.tooltip').css({'position': 'absolute', 'top': tPosY, 'left': tPosX}); };
虽然qTip（被接受的答案）是好的，但是我开始使用它，并且缺乏我需要的一些function。
然后，我偶然发现了PoshyTip – 它非常灵活，而且非常易于使用。 （我可以做我需要的）
好吧，经过一番努力，我可以得到一个“泡沫”，在所有正确的时间出现。 有很多样式需要发生，但这基本上是我使用的代码。
<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>
我已经编写了一个有用的jQuery插件，只需在jQuery中添加一行代码即可轻松创build智能泡泡popup窗口！
你可以做什么： – 将popup窗口附加到任何DOM元素！ – mouseover / mouseout事件自动pipe理！ – 设置自定义popup窗口事件！ – 创build智能阴影popup窗口！ （在IE也！） – 在运行时selectpopup式样式模板！ – 在popup窗口中插入HTML邮件！ – 设置许多选项：距离，速度，延迟，颜色…
Internet Explorer 6+，Firefox，Opera 9+，Safari完全支持Popup的阴影和彩色模板
QTip有jQuery 1.4.2的错误。 我不得不切换到jQuery泡泡popuphttp://www.vegabit.com/jquery_bubble_popup_v2/#examples ，它的工作原理很棒！
听起来你不想鼠标hover事件：你想要的jQueryhover（）事件。
而你似乎想要的是一个“丰富”的工具提示，在这种情况下，我build议jQuery工具提示 。 使用bodyHandler选项，您可以放入任意的HTML。
我试图做一个“泡泡”，可以在onmouseover事件被触发时popup，只要鼠标hover在投掷onmouseover事件的项目上，或者鼠标移动到泡泡中，就会保持打开状态。 我的泡泡需要有html和样式的所有方式，包括超链接，图像等
所有这些事件完全由这个插件pipe理…
ColorTip是我见过的最美丽的
jQuery Bubble Popup插件的新版本3.0支持jQuery v.1.7.2，目前是最着名的JavaScript库的最新和稳定版本。
3.0版本最有趣的function是，您可以将jQuery＆Bubble Popup插件与任何其他库和JavaScript框架（如Script.aculo.us，Mootols或Prototype）一起使用，因为插件是完全封装的，以防止不兼容问题;
jQuery Bubble Popup经过testing，支持大量已知和“未知”的浏览器， 请参阅完整列表的文档。
像以前的版本一样，jQuery Bubble Popup插件继续在MIT许可下发布; 只要版权标题保持不变，您就可以在商业或个人项目中自由使用jQuery Bubble Popup。
请下载最新版本或访问http://www.maxvergelli.com/jquery-bubble-popup/上的实时演示和教程;
自动调整简单的popup式泡泡
的index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="bubble.css" type="text/css" rel="stylesheet" /> <script language="javascript" type="text/javascript" src="jquery.js"></script> <script language="javascript" type="text/javascript" src="bubble.js"></script> </head> <body> <br/><br/> <div class="bubbleInfo"> <div class="bubble" title="Text 1">Set cursor</div> </div> <br/><br/><br/><br/> <div class="bubbleInfo"> <div class="bubble" title="Text 2">Set cursor</div> </div> </body> </html>
bubble.js
$(function () { var i = 0; var z=1; do{ title = $('.bubble:eq('+i+')').attr('title'); if(!title){ z=0; } else { $('.bubble:eq('+i+')').after('<table style="opacity: 0; top: -50px; left: -33px; display: none;" id="dpop" class="popup"><tbody><tr><td id="topleft" class="corner"></td><td class="top"></td><td id="topright" class="corner"></td></tr><tr><td class="left"></td><td>'+title+'</td><td class="right"></td></tr><tr><td class="corner" id="bottomleft"></td><td class="bottom"><img src="bubble/bubble-tail.png" height="25px" width="30px" /></td><td id="bottomright" class="corner"></td></tr></tbody></table>'); $('.bubble:eq('+i+')').removeAttr('title'); } i++; }while(z>0) $('.bubbleInfo').each(function () { var distance = 10; var time = 250; var hideDelay = 500; var hideDelayTimer = null; var beingShown = false; var shown = false; var trigger = $('.bubble', this); var info = $('.popup', this).css('opacity', 0); $([trigger.get(0), info.get(0)]).mouseover(function () { if (hideDelayTimer) clearTimeout(hideDelayTimer); if (beingShown || shown) { // don't trigger the animation again return; } else { // reset position of info box beingShown = true; info.css({ top: -40, left: 10, display: 'block' }).animate({ top: '-=' + distance + 'px', opacity: 1 }, time, 'swing', function() { beingShown = false; shown = true; }); } return false; }).mouseout(function () { if (hideDelayTimer) clearTimeout(hideDelayTimer); hideDelayTimer = setTimeout(function () { hideDelayTimer = null; info.animate({ top: '-=' + distance + 'px', opacity: 0 }, time, 'swing', function () { shown = false; info.css('display', 'none'); }); }, hideDelay); return false; }); }); });
bubble.css
/* Booble */ .bubbleInfo { position: relative; width: 500px; } .bubble { } .popup { position: absolute; display: none; z-index: 50; border-collapse: collapse; font-size: .8em; } .popup td.corner { height: 13px; width: 15px; } .popup td#topleft { background-image: url(bubble/bubble-1.png); } .popup td.top { background-image: url(bubble/bubble-2.png); } .popup td#topright { background-image: url(bubble/bubble-3.png); } .popup td.left { background-image: url(bubble/bubble-4.png); } .popup td.right { background-image: url(bubble/bubble-5.png); } .popup td#bottomleft { background-image: url(bubble/bubble-6.png); } .popup td.bottom { background-image: url(bubble/bubble-7.png); text-align: center; } .popup td.bottom img { display: block; margin: 0 auto; } .popup td#bottomright { background-image: url(bubble/bubble-8.png); }
Tiptip也是一个不错的图书馆。
你可以使用qTip这个; 但是，你必须编写一些代码才能在mouseover事件中启动它; 如果你想在你的文本字段默认水印，你必须使用水印插件…
我意识到这导致了很多重复的代码; 所以我在qTip之上写了一个插件，使附加信息popup窗口非常容易。 你可以在这里查看： https : //bitbucket.org/gautamtandon/jquery.attachinfo
希望这可以帮助。
