http://onehackoranother.com/projects/jquery/tipsy/
Let's say I hover over something. And the tooltip appears above the link. When I move my mouse to the tooltip, it disappears. Is there a way to keep it up?
The reason I'm asking this is because I want to put a button inside the tooltip. I don't want it to go away when I go click the button.
This functionality is not built-in, but it's not so hard to add it yourself by manually showing and hiding tipsy (using trigger: 'manual' and $.hover()). The code below, while a bit lengthy, should work fine.
$('.some-class-name').each(function () {
var me = this,
timer = null,
visible = false;
function leave() {
// We add a 100 ms timeout to give the user a little time
// moving the cursor to/from the tipsy object
timer = setTimeout(function () {
$(me).tipsy('hide');
visible = false;
}, 100);
}
function enter() {
if (visible) {
clearTimeout(timer);
} else {
$(me).tipsy('show');
// The .tipsy object is destroyed every time it is hidden,
// so we need to add our listener every time its shown
$('.tipsy').hover(enter, leave);
visible = true;
}
}
$(this).tipsy({html: true, trigger: 'manual'});
$(this).hover(enter, leave);
});
Please check the following code jquery.tipsy.js file
Starting from line 61 onwards
function() {
$.data(this, 'cancel.tipsy', false);
var self = this;
setTimeout(function() {
if ($.data(this, 'cancel.tipsy')) return;
var tip = $.data(self, 'active.tipsy');
if (opts.fade) {
tip.stop().fadeOut(function() {
$(this).remove();
});
} else {
tip.remove();
}
}, 100); // <- change 100 to 1000
Change "100" to "1000" on the indicated line.
According to the plug in documentation you can set a delay before the tool tip disappears, try:
$("#element").tipsy({ delayOut: 2000 }); // delay before hiding tooltip (ms)
See other configuration options here:
Try the cluetip plugin. ie sticky option in that from below link -
http://plugins.learningjquery.com/cluetip/demo/
This plugin is easy to use and lot of configuration options are available as well.
