Reputation: 4997

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.

Upvotes: 18

Answers (15)

balexandre

Reputation: 75133

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! :)

_{(source: balexandre.com)}

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/

Upvotes: 8

chandra

Reputation: 41

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

Upvotes: 0

Stefan Gabos

Reputation: 1471

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:

Screenshot

Upvotes: 0

magnetik

Reputation: 4431

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

Works fine and is easily customizable.

Upvotes: 0

Rob

Reputation: 11

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

Upvotes: 1

Bruiser

Reputation: 11887

qTip - no doubt about it

See here, too

Upvotes: 2

simon

Reputation: 12922

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/).

Upvotes: 0

Donny V.

Reputation: 23596

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

Plus it has themes enter image description here

Upvotes: 2

cuuri

Reputation: 11

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

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

Upvotes: 1

giorgio79

Reputation: 4239

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

Upvotes: 1

Brianna Smith

Reputation: 11

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

Upvotes: 1

missaghi

Reputation: 5090

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.

Upvotes: 18

Jab

Reputation: 13775

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.

Upvotes: 4