blocks|key|1609477|text|Qtip+is+the+best+one+I've+seen.它是麻省理工学院授权的，漂亮，有你需要的所有配置。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1609478|我最喜欢的轻量级选择是tipsy。也有麻省理工学院的执照。它激发了Bootstrap's+tooltip+plugin的灵感。|1609479|entityMap|0|LINK|mutability|MUTABLE|url|http://craigsworks.com/projects/qtip2/|1|https://github.com/jaz303/tipsy|2|http://getbootstrap.com/javascript/#tooltips^0|0|V|0|0|B|5|1|X|Q|2|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]|$A|Z|B|10|1|11]]|C|$]]|$1|F|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]]]

<p><a href="http://craigsworks.com/projects/qtip2/" rel="noreferrer">Qtip is the best one I've seen.</a> It's MIT licensed, beautiful, has all the configuration you need. </p>

<p>My favorite lightweight option is <a href="https://github.com/jaz303/tipsy" rel="noreferrer">tipsy</a>. Also MIT licensed. It inspired <a href="http://getbootstrap.com/javascript/#tooltips" rel="noreferrer">Bootstrap's tooltip plugin</a>.</p>


blocks|key|1394363|text|这也可以通过mouseover事件轻松完成。我已经做到了，它根本不需要200行代码。从触发事件开始，然后使用将创建工具提示的函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1394364|$('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);++++++++
};|code-block|syntax|javascript|1394365|然后创建一个函数，用触发mouseover事件的DOM元素的偏移位置来定位工具提示，这可以用css实现。|1394366|function+positionTooltip(event){
++++var+tPosX+=+event.pageX+-+10;
++++var+tPosY+=+event.pageY+-+100;
++++$('div.tooltip').css({'position':+'absolute',+'top':+tPosY,+'left':+tPosX});
};|1394367|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This can be done easily with the mouseover event as well. I've done it and it doesn't take 200 lines at all. Start with triggering the event, then use a function that will create the tooltip.</p>

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

function createTooltip(event){          
    $('&lt;div class="tooltip"&gt;test&lt;/div&gt;').appendTo('body');
    positionTooltip(event);        
};
</code></pre>

<p>Then you create a function that position the tooltip with the offset position of the DOM-element that triggered the mouseover event, this is doable with css.</p>

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


blocks|key|1609543|text|虽然qTip+(公认的答案)很好，但我开始使用它，它缺少一些我需要的功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1609544|然后我偶然发现了PoshyTip+-它非常灵活，而且真的很容易使用。(我可以做我需要的事情)|offset|length|1609545|entityMap|0|LINK|mutability|MUTABLE|url|http://vadikom.com/demos/poshytip/^0|0|8|8|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>Although qTip (the accepted answer) is good, I started using it, and it lacked some features I needed.</p>

<p>I then stumbled upon <a href="http://vadikom.com/demos/poshytip/" rel="noreferrer">PoshyTip</a> - it is very flexible, and really easy to use. (And I could do what I needed)</p>


blocks|key|1609334|text|好了，在一些工作之后，我可以在合适的时间弹出一个“气泡”，然后消失。仍然需要进行大量的样式设置，但这基本上就是我使用的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1609335|<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)+{
++++++++$("."%2BmouseoverClass).mouseover(function(event)+{
++++++++++++if+(onDiv+%7C%7C+onLink)+{
++++++++++++++++return+false;
++++++++++++}

++++++++++++onLink+=+true;

++++++++++++showBubble.call(this,+event);
++++++++});

++++++++$("."+%2B+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+%2B+15;
++++++++var+tPosY+=+event.pageY+-+60;
++++++++$('<div+ID="bubbleID"+style="top:'+%2B+tPosY+%2B+';+left:'+%2B+tPosX+%2B+';+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>|code-block|syntax|javascript|1609336|下面是它附带的html的一个片段：|1609337|<a+href=""+class="temp1">Mouseover+this+for+a+terribly+ugly+red+bubble!</a>|1609338|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Ok, after some work I'm able to get a "bubble" to pop up and go away at all the right times. There is a LOT of styling that needs to happen still but this is basically the code i used.</p>

<pre><code>&lt;script type="text/javascript"&gt;
    //--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 &amp;&amp; !onDiv) {
             $("#bubbleID").remove();

             bubbleExists = false;
        }
    }

    function showBubble(event) {
        if (bubbleExists) {
            hideBubble();
        }

        var tPosX = event.pageX + 15;
        var tPosY = event.pageY - 60;
        $('&lt;div ID="bubbleID" style="top:' + tPosY + '; left:' + tPosX + '; position: absolute; display: inline; border: 2px; width: 200px; height: 150px; background-color: Red;"&gt;TESTING!!!!!!!!!!!!&lt;/div&gt;').mouseover(keepBubbleOpen).mouseout(letBubbleClose).appendTo('body');

        bubbleExists = true;
    }

    function keepBubbleOpen() {
        onDiv = true;
    }

    function letBubbleClose() {
        onDiv = false;

        hideBubble();
    }


    //--TESTING!!!!!
    $("document").ready(function() {
        addBubbleMouseovers("temp1");
    });
&lt;/script&gt;
</code></pre>

<p>Here is a snippet of the html that goes with it:</p>

<pre><code>&lt;a href="" class="temp1"&gt;Mouseover this for a terribly ugly red bubble!&lt;/a&gt;
</code></pre>


blocks|key|1609446|text|我已经编写了一个有用的jQuery插件，只需用jQuery编写一行代码就可以轻松创建智能气泡弹出窗口！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1609447|你可以做什么：-将弹出窗口附加到任何DOM元素！-鼠标悬停/鼠标输出事件自动管理！-设置自定义弹出窗口事件！-创建智能阴影弹出窗口！(在IE中也是！)-在运行时选择弹出窗口的样式模板！-在弹出窗口中插入超文本标记语言消息！-设置许多选项:距离，速度，延迟，颜色…|1609448|弹出窗口的阴影和彩色模板完全支持9%2B+6%2B，Firefox，Opera+9%2B，Safari|1609449|您可以从http://plugins.jquery.com/project/jqBubblePopup下载源代码|offset|length|1609450|entityMap|0|LINK|mutability|MUTABLE|url|http://plugins.jquery.com/project/jqBubblePopup^0|0|0|0|4|1B|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@$H|V|I|W|1|X]]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

<p>I have programmed an useful jQuery Plugin to create easily smart bubble popups with only a line of code in jQuery!</p>

<p>What You can do:
- attach popups to any DOM element!
- mouseover/mouseout events automatically managed!
- set custom popups events!
- create smart shadowed popups! (in IE too!)
- choose popup’s style templates at runtime!
- insert HTML messages inside popups!
- set many options as: distances, velocity, delays, colors…</p>

<p>Popup’s shadows and colorized templates are fully supported by
Internet Explorer 6+, Firefox, Opera 9+, Safari</p>

<p>You can download sources from
<a href="http://plugins.jquery.com/project/jqBubblePopup" rel="nofollow noreferrer">http://plugins.jquery.com/project/jqBubblePopup</a></p>


blocks|key|1394698|text|QTip在jQuery+1.4.2中有错误。我不得不切换到jQuery泡泡弹出http://www.vegabit.com/jquery_bubble_popup_v2/#examples，它工作得很棒！|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1394699|entityMap|0|LINK|mutability|MUTABLE|url|http://www.vegabit.com/jquery_bubble_popup_v2/#examples^0|13|1J|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>QTip has bug with jQuery 1.4.2. I had to switch to jQuery Bubble Pop up <a href="http://www.vegabit.com/jquery_bubble_popup_v2/#examples" rel="nofollow">http://www.vegabit.com/jquery_bubble_popup_v2/#examples</a> and it works great!</p>


blocks|key|1394281|text|在我看来，您不希望将鼠标悬停在事件上:您需要jQuery+hover()事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1394282|您似乎想要的是一个“丰富”的工具提示，在这种情况下，我建议使用jQuery+tooltip。使用bodyHandler选项，您可以放入任意的HTML。|offset|length|1394283|entityMap|0|LINK|mutability|MUTABLE|url|http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/^0|0|V|E|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>Sounds to me you dn't want the mouse over events: you want the jQuery hover() event.</p>

<p>And what you seem to want is a "rich" tooltip, in which case I suggest <a href="http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/" rel="nofollow noreferrer">jQuery tooltip</a>.  With the bodyHandler option you can put arbitrary HTML in.</p>


blocks|key|1609497|text|ColorTip是我见过的最漂亮的|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1609498|entityMap|0|LINK|mutability|MUTABLE|url|http://demo.tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/colortips.html^0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p><a href="http://demo.tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/colortips.html" rel="nofollow noreferrer">ColorTip</a> is the most beautiful i've ever seen</p>


blocks|key|1394757|text|jQuery气泡弹出插件的新版本3.0支持jQuery+v.1.7.2，这是目前最著名的javascript库的最新和稳定版本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1394758|3.0版本最有趣的特性是，你可以将jQuery和气泡弹出插件与任何其他库和Script.aculo.us、Mootols或Prototype等javascript框架一起使用，因为插件是完全封装的，以防止不兼容问题；|1394759|jQuery气泡弹出窗口经过测试，支持许多已知和“未知”的浏览器；有关完整列表，请参阅文档。|1394760|像以前的版本一样，jQuery气泡弹出插件继续在麻省理工学院许可下发布；你可以在商业或个人项目中自由使用jQuery气泡弹出插件，只要版权头保持不变。|1394761|下载最新版本或访问http://www.maxvergelli.com/jquery-bubble-popup/上的现场演示和教程|offset|length|1394762|entityMap|0|LINK|mutability|MUTABLE|url|http://www.maxvergelli.com/jquery-bubble-popup/^0|0|0|0|0|9|1B|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@$J|Y|K|Z|1|10]]|A|$]]|$1|L|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

<p>The new version 3.0 of the jQuery Bubble Popup plugin supports jQuery v.1.7.2, currently the latest and stable version of the most famous javascript library.</p>

<p>The most interesting feature of the 3.0 version is that You can use together jQuery &amp; Bubble Popup plugin with any other libraries and javascript frameworks like Script.aculo.us, Mootols or Prototype because the plugin is completely encapsulated to prevent incompatibility problems;</p>

<p>jQuery Bubble Popup was tested and supports a lot of known and “unknown” browsers; see the documentation for the complete list.</p>

<p>Like previous versions, jQuery Bubble Popup plugin continues to be released under the MIT license; You are free to use jQuery Bubble Popup in commercial or personal projects as long as the copyright header is left intact.</p>

<p>download the latest version or visit live demos and tutorials at
<a href="http://www.maxvergelli.com/jquery-bubble-popup/" rel="nofollow">http://www.maxvergelli.com/jquery-bubble-popup/</a></p>


blocks|key|1394458|text|自动调整简单弹出窗口大小|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1394459|index.html|1394460|<!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>|code-block|syntax|javascript|1394461|bubble.js|1394462|$(function+()+{+++++
++var+i+=+0;
++var+z=1;
++do{
++++title+=+$('.bubble:eq('%2Bi%2B')').attr('title');
++++if(!title){
++++++z=0;
++++}+else+{
+++++++$('.bubble:eq('%2Bi%2B')').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>'%2Btitle%2B'</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('%2Bi%2B')').removeAttr('title');
++++}
++++i%2B%2B;
++}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+%7C%7C+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:+'-='+%2B+distance+%2B+'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:+'-='+%2B+distance+%2B+'px',
++++++++++opacity:+0
++++++++},+time,+'swing',+function+()+{
++++++++++shown+=+false;
++++++++++info.css('display',+'none');
++++++++});
++++++},+hideDelay);
++++++return+false;
++++});
++});+
});|1394463|bubble.css|1394464|/*+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);+
}|1394465|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Autoresize simple Popup Bubble</p>

<p>index.html</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;link href="bubble.css" type="text/css" rel="stylesheet" /&gt;
  &lt;script language="javascript" type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="bubble.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;br/&gt;&lt;br/&gt;
  &lt;div class="bubbleInfo"&gt;
      &lt;div class="bubble" title="Text 1"&gt;Set cursor&lt;/div&gt;
  &lt;/div&gt;
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;div class="bubbleInfo"&gt;
      &lt;div class="bubble" title="Text 2"&gt;Set cursor&lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>bubble.js</p>

<pre><code>$(function () {     
  var i = 0;
  var z=1;
  do{
    title = $('.bubble:eq('+i+')').attr('title');
    if(!title){
      z=0;
    } else {
       $('.bubble:eq('+i+')').after('&lt;table style="opacity: 0; top: -50px; left: -33px; display: none;" id="dpop" class="popup"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td id="topleft" class="corner"&gt;&lt;/td&gt;&lt;td class="top"&gt;&lt;/td&gt;&lt;td id="topright" class="corner"&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class="left"&gt;&lt;/td&gt;&lt;td&gt;'+title+'&lt;/td&gt;&lt;td class="right"&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class="corner" id="bottomleft"&gt;&lt;/td&gt;&lt;td class="bottom"&gt;&lt;img src="bubble/bubble-tail.png" height="25px" width="30px" /&gt;&lt;/td&gt;&lt;td id="bottomright" class="corner"&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;');
       $('.bubble:eq('+i+')').removeAttr('title');
    }
    i++;
  }while(z&gt;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;
    });
  }); 
});
</code></pre>

<p>bubble.css</p>

<pre><code>/* 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); 
}
</code></pre>


blocks|key|1394789|text|Tiptip也是一个很好的库。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1394790|entityMap|0|LINK|mutability|MUTABLE|url|http://code.drewwilson.com/entry/tiptip-jquery-plugin^0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p><a href="http://code.drewwilson.com/entry/tiptip-jquery-plugin" rel="nofollow">Tiptip</a> is also a nice library.</p>


blocks|key|1394832|text|你可以使用qTip来实现这一点；但是你必须编写一些代码来在mouseover事件上启动它；如果你想在文本字段中使用默认的水印，你必须使用水印插件...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1394833|我意识到这会导致很多重复的代码；所以我在qTip上写了一个插件，它使得将信息弹出窗口附加到表单字段变得非常容易。你可以在这里查看：https://bitbucket.org/gautamtandon/jquery.attachinfo|offset|length|1394834|希望这能有所帮助。|1394835|entityMap|0|LINK|mutability|MUTABLE|url|https://bitbucket.org/gautamtandon/jquery.attachinfo^0|0|1T|1G|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

<p>You can use qTip for this; However you'd have to code a little for launching it on mouseover event; And in case you want a default watermark on your text fields, you'd have to use the watermark plugin...</p>

<p>I realized that this leads to lot of repetitive code; So I wrote a plugin on top of qTip that makes it really easy to attach informational popup to form fields. You can check it out here: <a href="https://bitbucket.org/gautamtandon/jquery.attachinfo" rel="nofollow">https://bitbucket.org/gautamtandon/jquery.attachinfo</a></p>

<p>Hope this helps.</p>


<p>I'm trying to make a "bubble" that can popup when the <code>onmouseover</code> event is fired and will stay open as long as the mouse is over the item that threw the <code>onmouseover</code> event OR if the mouse is moved into the bubble. My bubble will need to have all manners of HTML and styling including hyperlinks, images, etc.</p>

<p>I've basically accomplished this by writing about 200 lines of ugly JavaScript but I would really like to find a jQuery plugin or some other way to clean this up a bit. </p>


jQuery Popup Bubble/Tooltip

jQuery

我试图创建一个“气泡”，它可以在触发onmouseover事件时弹出，只要鼠标停留在抛出onmouseover事件的项上，或者鼠标移动到气泡中，它就会保持打开状态。我的泡泡将需要有HTML的所有方式和样式，包括超链接，图像等。我基本上已经写了大约200行丑陋的JavaScript，但我真的想找到一个jQuery插件或其他方式来清理一下。

问jQuery弹出气泡/工具提示
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery弹出气泡/工具提示EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery弹出气泡/工具提示
EN