Recommendations for jQuery tooltips

Question

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.

Answer 1

Have you tried this?

www.raef22.org/jquery_tool/

It does something similar to what you describe.

Answer 2

I am a big fan of BeautyTips

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

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