Can I make this jQuery tooltip when my cursor is over it?

Question

http://onehackoranother.com/projects/jquery/tipsy/

Say I was pointing something. And a tooltip appears above the link. When I move the mouse into a tooltip, it disappears. Is there any way to save it?

The reason I'm asking about this is because I want to put a button inside the tooltip. I do not want him to leave when I press the button.

Answer 1

Try the cluetip plugin. those. the sticky option is that from under the link -

http://plugins.learningjquery.com/cluetip/demo/

This plugin is easy to use and many configuration options are available.

Answer 2

Please check the following jquery.tipsy.js file

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” in the specified line.

Answer 3

This functionality is not built-in, but it is not so difficult to add it manually, showing and hiding the tipsy (using trigger: 'manual' and $.hover() ). The code below, although a little long, 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); }); 

Answer 4

According to the documentation connection, you can set the delay until the tool tip disappears, try:

 $("#element").tipsy({ delayOut: 2000 }); // delay before hiding tooltip (ms) 

See other configuration options here:

http://onehackoranother.com/projects/jquery/tipsy/#options