Cluetip functionality question/request...
August 7, 2008 - 9:29pm — karmasAgent
| Project: | clueTip - flexible, enhanced tooltip |
| Version: | 0.9.8 |
| Component: | User interface |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
Jump to:
Description
I would like to adhere to the following use case but cannot figure out how using your plugin, or if it is even possible the way it is currently written. Use case as follows:
1. on hover of "?" button, display cluetip.
2. user can interact w/ content inside cluetip.
3. if user mousesout of cluetip, it closes.
4. there cannot be a close button - the dialog must close onmouseout.
Is there a solution for this? When I set it to sticky: false it closes whenever I am not over the spawning element, I want it to close only if the spawning element and the dialog have been moused out of OR the user clicks elsewhere on the screen.
Is this possible with your plugin? Thanks!
Comments
#1
Hi there,
Yes, this is possible. You'll need to set both "sticky" and "mouseoutClose" to true. If you don't want a close link to appear, I'd just give it the appropriate style rules in your stylesheet. Something like this will do:
div#cluetip div #cluetip-close {
position: absolute;
left: -1200em;
}
#2
Hey Karl,
Thanks for the quick reply! I tried what you said and I get the cluetip as sticky with the mouse-out having no impact on visiblity. Am I missing something? My thought was I was going to need to use Live Query or similar plugin to monitor the DOM for when the cluetip is created and attach the onmouseOut handler then.
That may not be the correct approach but I tried what you suggested and got nada.
Here's my code:
$(document).ready(function(){$('.sticky').cluetip({sticky: true, cluetipClass: 'jtip', cursor: 'pointer', ajaxCache: false, arrows: true, showTitle: false, mouseoutClose: true,
fx: {
open: 'fadeIn',
openSpeed: ''
},
hoverIntent: {
sensitivity: 7,
interval: 5,
timeout: 250
}
});
});
Any thoughts?
Thanks!
Michael
#3
Hi again,
Sorry, my fault. "mouseoutClose" should have been "mouseOutClose"
Here is a demo page that shows it working: http://plugins.learningjquery.com/cluetip/demo/mouseoutclose.html
I'm setting the Status of this request to closed, but feel free to re-open if I missed something.
#4
That did it!
Thank you, sir.