blocks|key|1627280|text|这是有史以来最棒的一次！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1627281|http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/|offset|length|1627282|演示：(查找“链接到雅虎”示例，以满足您的所有需求)|1627283|http://jquery.bassistance.de/tooltip/demo/|1627284|编辑:我看到你提到了Jorn+(我不知道他的名字)，但是看看"yahoo“的例子，它应该能做你想要的。|1627285|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|1N|0|0|0|0|16|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|C]]|S|$5|O|P|Q|A|$R|I]]]]

OHHHHHHHH Best one ever!

<a href="http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/" rel="noreferrer">http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/</a>

Demos: (look for the the "Link to yahoo" example to meet all of your needs)

<a href="http://jquery.bassistance.de/tooltip/demo/" rel="noreferrer">http://jquery.bassistance.de/tooltip/demo/</a>

EDIT: i see you mentioned Jorn (i didn't know his name) but look for the "yahoo" example it should do what you want.

blocks|key|1627236|text|我是BeautyTips的铁杆粉丝|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1627237|entityMap|0|LINK|mutability|MUTABLE|url|http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html^0|2|A|2|A|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

I am a big fan of <a href="http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html" rel="noreferrer"><code>BeautyTips</code></a>

blocks|key|1412899|text|qTip+-毫无疑问|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1412900|也请参阅here|1412901|entityMap|0|LINK|mutability|MUTABLE|url|http://craigsworks.com/projects/qtip/|1|https://stackoverflow.com/questions/625920/jquery-popup-bubble^0|0|4|0|0|4|4|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<a href="http://craigsworks.com/projects/qtip/" rel="nofollow noreferrer">qTip</a> - no doubt about it

See <a href="https://stackoverflow.com/questions/625920/jquery-popup-bubble">here</a>, too

blocks|key|1627375|text|您还可以尝试一个名为Likno+Web+Tooltips的工具：http://www.likno.com/jquery-tooltips/index.php|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1627376|entityMap|0|LINK|mutability|MUTABLE|url|http://www.likno.com/jquery-tooltips/index.php^0|W|1A|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]]]]

You could also try a tool called Likno Web Tooltips Builder:
<a href="http://www.likno.com/jquery-tooltips/index.php" rel="nofollow noreferrer">http://www.likno.com/jquery-tooltips/index.php</a>

blocks|key|1412753|text|最好的http://flowplayer.org/tools/tooltip/index.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1412754|entityMap|0|LINK|mutability|MUTABLE|url|http://flowplayer.org/tools/tooltip/index.html^0|3|1A|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]]]]

Simply the best
<a href="http://flowplayer.org/tools/tooltip/index.html" rel="nofollow">http://flowplayer.org/tools/tooltip/index.html</a>

blocks|key|1627455|text|这是一个jQuery工具提示，几乎可以做任何事情，看起来也很棒：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1627456|提示：http://projects.nickstakenburg.com/tipped|offset|length|1627457|entityMap|0|LINK|mutability|MUTABLE|url|http://projects.nickstakenburg.com/tipped^0|0|3|15|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]]]]

Here's a jQuery tooltip that can do pretty much anything, looks great too:

Tipped: <a href="http://projects.nickstakenburg.com/tipped" rel="nofollow">http://projects.nickstakenburg.com/tipped</a>

blocks|key|1627593|text|这是我使用的一个很棒的工具，它有一个位置和鼠标跟随选项，也有一堆开箱即用的主题。http://www.websanova.com/plugins/websanova/tooltip|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1627594|entityMap|0|LINK|mutability|MUTABLE|url|http://www.websanova.com/plugins/websanova/tooltip^0|14|1E|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]]]]

This is a great one I use, it has a positional and mouse follow options, also comes with a bunch of themes out of the box. <a href="http://www.websanova.com/plugins/websanova/tooltip" rel="nofollow">http://www.websanova.com/plugins/websanova/tooltip</a>

blocks|key|1627322|text|我想过要用这个：http://www.codylindley.com/blogstuff/js/jtip/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1627323|这个是：http://onehackoranother.com/projects/jquery/tipsy/|1627324|其他推荐的可能更适合您的需求|1627325|entityMap|0|LINK|mutability|MUTABLE|url|http://www.codylindley.com/blogstuff/js/jtip/|1|http://onehackoranother.com/projects/jquery/tipsy/^0|8|19|0|0|4|1E|1|0|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]]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

ive thought of using this:
<a href="http://www.codylindley.com/blogstuff/js/jtip/" rel="nofollow noreferrer">http://www.codylindley.com/blogstuff/js/jtip/</a>

and this:
<a href="http://onehackoranother.com/projects/jquery/tipsy/" rel="nofollow noreferrer">http://onehackoranother.com/projects/jquery/tipsy/</a>

the others recommended might suit your needs better

blocks|key|1627518|text|我推荐ClueTip：http://plugins.learningjquery.com/cluetip/它易于使用，支持工具提示中的换行符(使用可自由配置的分隔符)，并且在表格单元格中似乎工作得很好(http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/并非如此)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1627519|entityMap|0|LINK|mutability|MUTABLE|url|http://plugins.learningjquery.com/cluetip/|1|http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/^0|B|16|0|2T|1N|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

I recommend ClueTip: <a href="http://plugins.learningjquery.com/cluetip/" rel="nofollow">http://plugins.learningjquery.com/cluetip/</a> It's easy to use, supports line breaks in tool tips (with a freely configurable separator) and seems to work well within table cells (which was not case with <a href="http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/" rel="nofollow">http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/</a>).

blocks|key|1627620|text|jQuery+UI现在有一个内置的工具提示模块：http://jqueryui.com/tooltip/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1627621|运行良好，并且很容易定制。|1627622|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/tooltip/^0|O|S|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

jQuery UI now have a built-in tooltip module : <a href="http://jqueryui.com/tooltip/" rel="nofollow">http://jqueryui.com/tooltip/</a>

Works fine and is easily customizable.

blocks|key|1627714|text|我还构建了a+jQuery+plugin+for+tooltips+-它真的很小-+5KB，非常容易设置和使用，并且有许多配置选项；它将在视区内定位提示，而不考虑垂直/水平滚动或窗口大小；宽度和背景颜色可以在初始化时更改。它没有使用任何图像-它使用CSS来处理所有花哨的东西，并在较老的浏览器上优雅地降级。它甚至在IE6+:)中也可以工作，默认情况下，它看起来像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1627715|​|1627716|📷|atomic|1627717|1627718|entityMap|0|LINK|mutability|MUTABLE|url|http://stefangabos.ro/jquery/zebra-tooltips/|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/d74bbe5d4c9e82f1dfe5cbd67836c8dc.png|imageAlt^0|5|S|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|I|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|S|N|T|C|$U|V|W|-4]]]]

I've also built <a href="http://stefangabos.ro/jquery/zebra-tooltips/" rel="nofollow noreferrer">a jQuery plugin for tooltips</a> - it's really small - 5KB minified, very easy to set-up and use, and with lots of configuration options; it'll position the tips inside the viewport regardless of vertical/horizontal scroll, or window size; Width and background color can be changed at initialization. It used no images whatsoever - it uses CSS for all the fancy stuff and degrades gracefully for older browsers. It works even in IE6 :) And, by default, it looks like this:

<img src="https://i.stack.imgur.com/ExGy0.png" alt="Screenshot">

blocks|key|1627781|text|NewTip+-->|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1627782|++++++New+Tooltip+JQuery+plugin+with+support+in+browsers+from+IE7%2B,+Firefox,+Chrome+|code-block|syntax|javascript|1627783|无论是处理回调的事件还是任何类型的元素，都非常吸引人且易于定制。|1627784|试一试：|1627785|JQuery插件注册表：http://plugins.jquery.com/newtip/|offset|length|1627786|Github主页：https://github.com/chandra7mca/newtip|1627787|entityMap|0|LINK|mutability|MUTABLE|url|http://plugins.jquery.com/newtip/|1|https://github.com/chandra7mca/newtip^0|0|0|0|0|C|X|0|0|9|11|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|14|8|@]|9|@$M|15|N|16|1|17]]|A|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@$M|19|N|1A|1|1B]]|A|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

NewTip -->

<pre><code> New Tooltip JQuery plugin with support in browsers from IE7+, Firefox, Chrome 
</code></pre>

Very Attractive and easy to customize for both events handling callbacks and for any type of element.

give it a try :

JQuery Plugin Registry : <a href="http://plugins.jquery.com/newtip/" rel="nofollow">http://plugins.jquery.com/newtip/</a>

Github Home Page : <a href="https://github.com/chandra7mca/newtip" rel="nofollow">https://github.com/chandra7mca/newtip</a>

I am looking for tooltip plugins for jQuery that would allow for the following type of behavior.

<pre><code>&lt;a href="somewhere.html"&gt;
 &lt;span&gt;
 &lt;img src="someimage.jpg" style="display: none;" /&gt;
 Here is the tooltip content.
 &lt;/span&gt;
 Here is the link to somewhere.
&lt;/a&gt;
</code></pre>

The behavior that I am hoping for is to hover over "Here is the link to somewhere" and have a tooltip pop up showing the content of the span containing "someimage.jpg" and "Here is the tooltip content".

I would prefer that the tooltip track along with the mouse's movement over the link and that the tooltip's appearace (background color, opacity, border color, etc.) be configurable.

The two most popular tooltips that I have found, "clueTip" and Jörn Zaefferer's "Tooltip" do not seem to fit the bill, unless I am missing something.

Ultimately, the links and images will be dynamically generated.

Recommendations for jQuery tooltips

jQuery

我正在寻找jQuery的工具提示插件，将允许以下类型的行为。<a href="somewhere.html"> <img src="someimage.jpg" style="display: none;" /> Here is the tooltip content. Here is the link to somewhere.</a>我希望的行为是将鼠标悬停在

问jQuery工具提示的建议
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery工具提示的建议EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery工具提示的建议
EN