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?
Add a comment
|
3 Answers
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
Comments
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.
2 Comments
Dustin Getz
i couldn't make this work, qtip expects the tooltip to persist and wants to handle the show/hide itself. i need to be able to show/hide in code.
pahnin
calling qtip on click is no use qtip is handling the show hide itself on mouseover, I dont know if we can configure it not to
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.
