Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Recommendations for jQuery tooltips

Tags:

jquery

tooltip

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.

like image 951
jerome Avatar asked Feb 12 '09 21:02

jerome

People also ask

What is the use of tooltip in jQuery?

The jQuery UI tooltip() method adds tooltip to any element on which you want to display tooltip. It gives a fade animation by default to show and hide the tooltip, compared to just toggling the visibility. Syntax: You can use the tooltip() method in two forms.

How do I show dynamic tooltip?

Here's how: Drag the calculated field to the appropriate tooltip and you'll see an ATTR dimension pill with a tooltip logo in the Marks card. Insert the ATTR budget and adjusted inflated gross calculated fields into its corresponding tooltip as seen in Image 6. After that, you're dynamic tooltip should work!

Which tag is used for tooltip?

Basic Tooltip HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .

1 Answers

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.

like image 180
missaghi Avatar answered Oct 05 '22 02:10

missaghi
Sign in to Comment

Related questions

Check if string contains any letter (Javascript/jquery)
Jquery Animate on Hover
focus doesn't work in IE
Produce "toast" messages like StackOverflow
jQuery select 'this' and another selector at same time
How to prevent jQuery code from too much nesting functions?
How to return a JSON object in standard web forms .Net
jQuery Uncaught TypeError: Object[object Object] has no method slider
JQuery val() returns empty string
Remove string from a string jquery
Differences between keyup() event and change() event in username live change
Why using jquery map?
jQuery DataTables - Access all rows data
Anchor element onClick makes page jump to top of page
MVC Web API, Error: Can't bind multiple parameters
Determine if html select contains a value in any of its child options
jquery callback on image load when changing the src
jQuery parse HTML without loading images
HighCharts: Labels visible over tooltip
BootStrap : Uncaught TypeError: $(...).datetimepicker is not a function

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!