JQuery simple tooltip

Question

I'm looking for some JQuery tooltip plugin or even a simple solution to show a dynamic value from an input field when I mouse over a determined link (text or image)

I've tried a lot of plugins but none can give me the dynamic value of the field.

Example:

Input field: input type="text" name="example" id="example" value=""

Link for mouseover/tooltip:

a href="#" id="tooltip">value</a

The value of the input field will be changed by another JQuery function and it's working fine, but when I try to show it's value using any tooltip plugin, doesn't work.

If I simple use the alert() function, it's working fine.

I don't need any fancy tooltip, only show the value of the input field.

Please, any solution?

Answer 1

look on this library

http://flowplayer.org/tools/demos/tooltip/index.html

Answer 2

We use tipsy for our tooltips on twitter.com, and it works great. It can generate the tooltip text dynamically using a callback function, like this:

HTML:

<input type="text" id="example" value="foo" />

JavaScript:

$("#example").tipsy({
  title: function() {
    return $(this).val();
  }
});

Here's a complete example/demo. There are plenty of configuration options to suit your needs.