推荐17个优美新鲜的jQuery的工具提示插件
jopen 12年前
<div id="cnblogs_post_body"> <p><span id="result_box" lang="zh-CN"><span>在web开发当中，工具提示条对于完善web网站的用户体验至关重要。title属性通常是</span><span>用来<span id="result_box" lang="zh-CN"><span>帮助用户</span><span>了解</span></span>显示</span><span>链接的</span><span>信息</span><span>。</span><span>默认情况下</span><span>用于一个访客来说真是不好找，因为鼠标放上去他才可能显示</span><span>。如果做一个</span><span>像</span><span>电子商务</span><span>网站的注册页面</span><span>，</span><span>页面</span><span>包含</span><span>这么</span><span>多的信息，如何让</span><span>用户可以把</span><span>鼠标悬停</span><span>链接他自动弹出醒目的信息</span><span>。这个使用jquery</span><span>强大</span><span>的</span><span>工具提示</span><span>插件在</span><span>这种情况下是可以</span><span>的</span><span>完美实现的</span><span>。</span><span>你</span><span>需要做的就是</span><span>添加</span><span>title属性</span><span>指定</span><span>的类名</span><span>。</span><span>在这篇文章中</span><span>，我收集了</span><span>17</span><span>个</span><span>和新鲜的</span><span>jQuery的</span><span>工具提示</span><span>插件，</span></span></p> <p><span lang="zh-CN"><span><span id="result_box" lang="zh-CN"><span>他们都是</span><span>轻量级的</span><span>工具提示</span><span>插件</span><span>，他们几乎没有</span><span>相同的功能</span><span>，</span><span>你需要下载下面为他们配置类或者ID，就可以使用</span></span></span></span></p> <h2 class="link"><a href="/misc/goto?guid=4958523555490677710" target="_blank">Simpletooltip</a></h2> <p><img title="Simpletooltip.png" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/21ac51528dab0fffa7aee43eb1e62632.png" width="525" height="369" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958523555586276534" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958523555490677710" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> <p> </p> <h2 class="link"><a href="/misc/goto?guid=4958523555691831678" target="_blank">MiniJS Tip</a></h2> <p><img title="MiniJs - Tip.png" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/ba0afdd0dedc8fa802ea987e61030ee4.png" width="525" height="297" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958523555782855492" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958523555691831678" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> <p> </p> <h2 class="link"><a href="/misc/goto?guid=4958187529791468292" target="_blank">qTip2</a></h2> <p><img title="qTip2 - Pretty powerful tooltips.png" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/e32adc3a612dbedfe3e578aca15aca5f.png" width="525" height="330" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958523555919460755" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958187529791468292" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> <p> </p> <h2 class="link"><a href="/misc/goto?guid=4958523556013813520" target="_blank">PowerTip</a></h2> <p><img title="jQuery PowerTip.png" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/4aeb4f2273582d0d7c08fb0e5ef58707.png" width="525" height="326" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958523556111541501" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958523556013813520" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> <p> </p> <h2 class="link"><a href="/misc/goto?guid=4958343118820431656" target="_blank">tooltipsy</a></h2> <p><img title="tooltipsy - jQuery tooltip plugin.png" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/ee7e0758ca246c53b68d38a8c4cba875.png" width="525" height="293" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958523556245904212" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958343118820431656" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> <p> </p> <h2 class="link"><a href="/misc/goto?guid=4958523556357628873" target="_blank">aToolTip</a></h2> <p><img title="aToolTip.png" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/1578ac6bbf4d271963099f167148df4d.png" width="525" height="249" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958523556452786276" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958523556357628873" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> <p> </p> <h2 class="link"><a href="/misc/goto?guid=4958185125307724501" target="_blank">Tipsy</a></h2> <p><img title="tipsy.png" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/fe9ca7883651bd68818e773d8b9bcc77.png" width="525" height="242" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958185125307724501" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958185125307724501" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> <p> </p> <h2 class="link"><a href="/misc/goto?guid=4958523556600611616" target="_blank">wTooltip</a></h2> <p><img title="Websanova - jQuery Tooltip Plugins.png" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/bf12640e0fd6d3c73ce070be0a6599a6.png" width="525" height="305" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958523556694603520" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958523556600611616" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> <p> </p> <h2 class="link"><a href="/misc/goto?guid=4958523556795065599" target="_blank">Poshy Tip</a></h2> <p><img title="Poshy Tip jQuery Plugin.png" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/4a43958627c9332d09c844b193a42b75.png" width="525" height="305" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958184954248103839" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958523556795065599" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> <p> </p> <h2 class="link"><a href="/misc/goto?guid=4958523556928169571" target="_blank">miniTip</a></h2> <p><img title="miniTip jQuery Plugin.png" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/846d81baa0514a708822442ed01eb988.png" width="525" height="278" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958523557022074754" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958523556928169571" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> <p> </p> <h2 class="link"><a href="/misc/goto?guid=4958185113990026915" target="_blank">TipTip</a></h2> <p><img title="TipTip jQuery Plugin.png" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/ad596aac162f5ed7901563d811085ace.png" width="525" height="324" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958523557157986499" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958185113990026915" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> <p> </p> <h2 class="link"><a href="/misc/goto?guid=4958343114094187488" target="_blank">Colortip</a></h2> <p><img title="Colortip.png" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/a3bf174fc14ab4edaf20a99b8fff81fc.png" width="525" height="311" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958523557279313394" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958343114094187488" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> <p> </p> <h2 class="link"><a href="/misc/goto?guid=4958349063537188026" target="_blank">jQuery Clean and Simple Tooltips: gips</a></h2> <p><img title="gips.jpg" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/73723dd18443073668ad44968ab25342.jpg" width="525" height="331" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958523557416063773" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958349063537188026" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> <p> </p> <h2 class="link"><a href="/misc/goto?guid=4958187183577000760" target="_blank">grumble.js</a></h2> <p><img title="grumblejs.jpg" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/34db0c7d79f7572d49024ebec040ffad.jpg" width="525" height="344" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958187183577000760" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958187183577000760" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> <p> </p> <h2 class="link"><a href="/misc/goto?guid=4958523557565948012" target="_blank">Style-my-tooltips</a></h2> <p><img title="Style-my-tootltips jquery plugin.png" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/2bf16f35a821758885543fbb7d890fc9.png" width="525" height="351" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958523557661780617" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958523557565948012" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> <p> </p> <h2 class="link"><a href="/misc/goto?guid=4958523557756433705" target="_blank">Responsive Tooltip</a></h2> <p><img title="css_jquery_tooltip.jpeg" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/9a331437112ac38f139132d362a5f473.jpg" width="525" height="354" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958523557847183065" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958523557756433705" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> <p> </p> <h2 class="link"><a href="/misc/goto?guid=4958523557948028716" target="_blank">tinytooltip</a></h2> <p><img title="tinytooltip - a tiny tooltip plugin for jQuery.png" border="0" alt="推荐17个优美新鲜的jQuery的工具提示插件" src="https://simg.open-open.com/show/c2fda67eb8ec226bef05e347f1cf6a5e.png" width="525" height="278" /></p> <div class="linkmeta"> <a class="button" href="/misc/goto?guid=4958523557948028716" rel="nofollow" target="_blank"><span class="a-btn-text">在线演示</span></a> <a class="button" href="/misc/goto?guid=4958523557948028716" rel="nofollow" target="_blank"><span class="a-btn-text">获取更多</span></a> </div> </div> <div> <br /> 来自： <a href="/misc/goto?guid=4958523558057875090" target="_blank">http://www.cnblogs.com/web8cn/archive/2012/09/05/17-beautiful-and-fresh-jquery-tooltip-plugins.html</a> </div>