开发者

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

开发者 https://www.devze.com 2023-02-05 18:56 出处:网络
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

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.


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.


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);

});


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.


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:

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

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号