jquery tooltip, but on click instead of hover

Question

We were using 'title' attributes to display something on mouseover. We want it now to display on a click. How can I get a floating box that looks like a title/tooltip, but can be shown and hidden on demand instead of being tied to a hover?

Answer 1

You might want to try this library:

http://craigsworks.com/projects/qtip/

And then simply call .qtip on a .click event handler.

$('#myInput').click(function(){/*insert qtip code here*/});

Note: you can grab the title attribute dynamically to use that content in the qtip tooltips, if you so choose.

Answer 2

If you feel like handcoding it, this should do the job:

The html:

<div id="tooltip" style="display:none;">bla bla</div>

<div id="yourLink">Click here to show the tooltip!</div>

And the JS:

$('#yourLink').click(function(){
  $('#tooltip').toggle();
});

You just need to style correctly the tooltip div

There are also nice tooltip plugins out there. iftrue mentioned one, there is also this one

Answer 3

Would like to add to iftrue's answer that you can grab (and remove) the title attribute in the mouseenter event and place it back in the mouseleave. This to prevent the browser from showing the hover, but still using the attribute to store the text.