11个新鲜的jQuery提示Tooltip插件

openkk 12年前
   <h2>1. QTip2 : Powerful Tooltip Plugin</h2>    <p><a href="https://simg.open-open.com/show/028d469f70d61bf64ae17e4b1712715e.jpg"><img class="aligncenter size-full wp-image-9985" title="qtip2" alt="11个新鲜的jQuery提示Tooltip插件" src="https://simg.open-open.com/show/028d469f70d61bf64ae17e4b1712715e.jpg" width="530" height="355" /></a><br /> qTip2 is the second generation of the advanced qTip plugin for the ever popular jQuery framework. Building on 1.0’s user friendly, yet feature rich base, qTip2 provides you with tonnes of features like speech bubble tips and imagemap support, and completely free under the MIT/GPLv2 licenses.<br /> qTip2 utilizes a separate stylesheet to contain all tooltip styles, which allows you to easily add new styles without additional JavaScript code, as well as easily editing pre-existing styles.<br />  <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958187529791468292" target="_blank"><span class="left">Download</span></a><br />  </p>    <h2>2. Posy Tip jQuery Plugin</h2>    <p><a href="https://simg.open-open.com/show/d936fa6bbe23e081a2830a0935822f05.jpg"><img class="aligncenter size-full wp-image-9986" title="Poshy-tip" alt="11个新鲜的jQuery提示Tooltip插件" src="https://simg.open-open.com/show/d936fa6bbe23e081a2830a0935822f05.jpg" width="530" height="239" /></a><br /> Poshy Tip jQuery Plugin is a tooltip plugin that allows users to easily create stylish tooltips. Poshy Tip enables you to position the tips relative to the mouse cursor or to the target element and align them in every possible way horizontally and vertically.<br /> Poshy Tip supports using a function for returning the tooltip content and the script also passes an update callback function as an argument to this function. By using this callback, you can easily update asynchronously the content of the tooltip after it has been displayed.<br />  <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958184954248103839" target="_blank"><span class="left">Download</span></a><br />  </p>    <h2>3. Hovercard jQuery Plugin</h2>    <p><a href="https://simg.open-open.com/show/3f36ecd35e452ff577e89bca8ce749d8.jpg"><img class="aligncenter size-full wp-image-9987" title="hovercard" alt="11个新鲜的jQuery提示Tooltip插件" src="https://simg.open-open.com/show/3f36ecd35e452ff577e89bca8ce749d8.jpg" width="530" height="262" /></a><br /> Hovercard is a free light weight jQuery plugin that enables you to display related information with the hovered label, link, or any html element of your choice. It comes with built in 推ter and 非死book hovercard.<br /> A hovercard comes handy when displaying Person bio, Book author and price, loading related information with Ajax and Editing in place. You may also add your own custom data source and display the profile data using existing card format. It supports callback functions on hover in and hover out.<br />  <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958200888695204285" target="_blank"><span class="left">Download</span></a><br />  </p>    <h2>4. Grumble.js : Special Tooltips Without Positioning Limitations</h2>    <p><a href="https://simg.open-open.com/show/4668cb99a120e1a38f02de2d6e75eb08.jpg"><img class="aligncenter size-full wp-image-9988" title="grumblejs-bubble-tooltip" alt="11个新鲜的jQuery提示Tooltip插件" src="https://simg.open-open.com/show/4668cb99a120e1a38f02de2d6e75eb08.jpg" width="530" height="195" /></a><br /> Grumble.js provides special tooltips without the usual limitations of north/east/south/west positioning. A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified.<br /> Any CSS style can be applied. There’s auto-magic size adjustment for use with localized text. FX queues for animating multiple grumbles. And it works in IE6+, and modern browsers. Image spiriting is used for actual bubble image, you can change this as you want – it’s just CSS.<br />  <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958187183577000760" target="_blank"><span class="left">Download</span></a><br />  </p>    <h2>5. Colortip : jQuery Tooltip Plugin</h2>    <p><a href="/misc/goto?guid=4958343113291759607"><img class="aligncenter size-full wp-image-9989" title="Colortip–jQuery-Tooltip-Plugin" alt="11个新鲜的jQuery提示Tooltip插件" src="https://simg.open-open.com/show/ec3193bd176b171585eb89e0bf515611.jpg" width="530" height="302" /></a><br /> Colortip converts the title attributes of elements within your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design.<br /> You can also easily create your own tooltip designs by just including three additional style classes to your stylesheet and adding an element to the supported colors array in colortip-1.0-jquery.js.<br />  <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958343114094187488" target="_blank"><span class="left">Download</span></a><br />  </p>    <h2>6. TipTip Custom Tooltip jQuery Plugin</h2>    <p><a href="https://simg.open-open.com/show/255ddad51eb4f1112980a36bf205c20e.jpg"><img class="aligncenter size-full wp-image-9990" title="TipTip jQuery Plugin" alt="11个新鲜的jQuery提示Tooltip插件" src="https://simg.open-open.com/show/255ddad51eb4f1112980a36bf205c20e.jpg" width="530" height="308" /></a><br /> TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.<br />  <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958185113990026915" target="_blank"><span class="left">Download</span></a><br />  </p>    <h2>7. iPicture : jQuery Plugin for Images with Tooltip</h2>    <p><a href="https://simg.open-open.com/show/6ecc1b3b466c46158c7648df327104d5.jpg"><img class="aligncenter size-full wp-image-9991" title="ipicture-jquery_plugin" alt="11个新鲜的jQuery提示Tooltip插件" src="https://simg.open-open.com/show/6ecc1b3b466c46158c7648df327104d5.jpg" width="530" height="359" /></a><br /> iPicture, a jQuery plugin, is perfect for such cases and allows us to place tooltips over any desired location of images. Once the user hovers/clicks the pointers, the tooltip is displayed with its pre-defined content. iPicture has a handy initialize function that saves so much time by enabling a configuration wizard where we can place pointers + set their definitions with drag ‘n’ drops and the JSON output to be used in the code is created automatically.<br />  <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958343115657394996" target="_blank"><span class="left">Download</span></a><br />  </p>    <h2>8. Simpletip : A Flexible jQuery Tooltip Plugin</h2>    <p><a href="https://simg.open-open.com/show/aff63fd711ca6d9acafb05b01073cc8c.gif"><img class="aligncenter size-full wp-image-9992" title="jquery-simple-tip-plugin" alt="11个新鲜的jQuery提示Tooltip插件" src="https://simg.open-open.com/show/aff63fd711ca6d9acafb05b01073cc8c.gif" width="530" height="98" /></a><br /> Simpletip is a fresh & lightweight jQuery plugin for creating flexible tooltips. Tooltips can be attached to any element & easily styled in means of presentation & positioning. Simpletip provides various options for max. Customization. The plugin is well-documented & provides examples. The tooltips can be static, dynamic or loaded via Ajax. And, any combination of effects can be applied to make them more attractive.<br />  <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958185119641262516" target="_blank"><span class="left">Download</span></a><br />  </p>    <h2>9. jQuery Bubble Popup</h2>    <p><a href="https://simg.open-open.com/show/89f8ac029538932c14d53d944f45ca62.jpg"><img class="aligncenter size-full wp-image-10014" title="JQuery Tooltip PopUp" alt="11个新鲜的jQuery提示Tooltip插件" src="https://simg.open-open.com/show/89f8ac029538932c14d53d944f45ca62.jpg" width="550" height="250" /></a></p>    <p>jQuery Bubble Popup is a plugin for the popular JS framework that helps creating chic tooltips which can be controlled easily.<br /> The tooltips are shown/hidden with fading animations and any HTML content can be displayed inside them. They can be attached to any side of an element and it is possible to get the status of a tooltip (on/off, creation, last-modified or last-display date & time) to act accordingly.<br />  <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958343117220545126" target="_blank"><span class="left">Download</span></a><br />  </p>    <h2>10. Beauty Tips</h2>    <p><a href="https://simg.open-open.com/show/d46870eeea965001a14209515587d995.gif"><img class="aligncenter size-full wp-image-9994" title="beautytips" alt="11个新鲜的jQuery提示Tooltip插件" src="https://simg.open-open.com/show/d46870eeea965001a14209515587d995.gif" width="530" height="210" /></a><br /> BeautyTips is a jQuery plugin which draws tooltips in real-time using the canvas element. Every tooltip, by default is displayed at the side of an element where there is more space. But the position can also be forced. Content can be hard-coded, called from an attribute or with an Ajax request. The look & feel of the tooltips can be totally customized considering they are canvas elements.<br />  <br /> <a class="buttons btn_dark right" href="/misc/goto?guid=4958343118019156116" target="_blank"><span class="left">Download</span></a><br />  </p>    <h2>11. Tooltipsy : jQuery Tooltip plugin for Designers</h2>    <a href="https://simg.open-open.com/show/ed4c26a747bb5b435ac398108de7b430.gif"><img class="aligncenter size-full wp-image-9995" title="tooltipsy-jquery-tooltips" alt="11个新鲜的jQuery提示Tooltip插件" src="https://simg.open-open.com/show/ed4c26a747bb5b435ac398108de7b430.gif" width="530" height="265" /></a>    <br /> Tooltipsy is a jQuery plugin that provides a flexible base for creating tooltips. It can be positioned however you wish, look and feel can be totally customized with CSS and any type of animations can be implemented. Compared to other plugins, it comes with minimum default styles or animations but gives you the complete control over them.    <br />      <br />    <a class="buttons btn_dark right" href="/misc/goto?guid=4958343118820431656" target="_blank"><span class="left">Download</span></a>