Recommendations for jQuery tooltips

问题:

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

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

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.

回答1:

OHHHHHHHH Best one ever!

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

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

http://jquery.bassistance.de/tooltip/demo/

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

回答2:

telling you the true, I tried a couple of them but I'm sticking with one that I really like:

http://craigsworks.com/simpletip/sandbox/

there are plenty of things you can change and they look fantastic Anywhere! :)

alt text http://www.balexandre.com/temp/StackOverflow_jquerySimpleTip.png

Updated

As pbz said, this is no longer available for copyright infrangiments, but the same can be found in the 'original' developer at

http://www.nickstakenburg.com/projects/prototip2/

回答3:

I am a big fan of BeautyTips

回答4:

Does it have to be jquery? You can do it with just CSS if you like.

a.info
{
    position: relative;
    z-index: 24;
}

a.info:hover
{
    z-index: 25;    
}

a.info span
{
    display: none;
}

a.info:hover span
{
    display: block;
    position: absolute;
    top: 2em;
    left: 2em;
    width: 15em;
    padding: 6px;
    border: 1px solid black;
    background-color: #eeeeee;
    color: #000;
}

Then you can use it just like you have it.

<a href="somewhere.html" class="info">
 <span>
  <img src="images/someImage.jpg" />
  Here is the tooltip content.
 </span>
 Here is the link to somewhere.
</a>

EDIT

Reading my daily dose of blogs this article came to my attention. They create a jquery plugin that does what you want, pops up an image with style options and mouse movement. Check out the result here.

http://james.padolsey.com/demos/imgPreview/full/

You should be able to either follow the tutorial and write the plugin or download the example plugin.

回答5:

This should let you put anything you want in the tool tip box.
http://code.google.com/p/next-msg/

Plus it has themes

回答6:

qTip - no doubt about it

See here, too

回答7:

You could also try a tool called Likno Web Tooltips Builder: http://www.likno.com/jquery-tooltips/index.php

回答8:

Simply the best http://flowplayer.org/tools/tooltip/index.html

回答9:

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

Tipped: http://projects.nickstakenburg.com/tipped

回答10:

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. http://www.websanova.com/plugins/websanova/tooltip

回答11:

ive thought of using this: http://www.codylindley.com/blogstuff/js/jtip/

and this: http://onehackoranother.com/projects/jquery/tipsy/

the others recommended might suit your needs better

回答12:

I recommend ClueTip: http://plugins.learningjquery.com/cluetip/ 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 http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/).

回答13:

jQuery UI now have a built-in tooltip module : http://jqueryui.com/tooltip/

Works fine and is easily customizable.

回答14:

I've also built a jQuery plugin for tooltips - 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:

回答15:

NewTip -->

      New Tooltip JQuery plugin with support in browsers from IE7+, Firefox, Chrome 

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

give it a try :

JQuery Plugin Registry : http://plugins.jquery.com/newtip/

Github Home Page : https://github.com/chandra7mca/newtip