How to make tooltipsy staying so a link in it can be clicked

问题

I have the jQuery plugin Tooltipsy to generate a tooltip for a link. In this tooltip I have other links to related objects. I would like it to pop up just above the initial link and stay if I move the mouse to it to click a link. Is this possible? Does anyone know how to do it?

回答1:

I didn't manage to get it to stay open and couldn't wait any longer so I changed to another tooltip plugin called simpletip that provided the functionality that I needed.

Simpletip could not get the title attribute from the links by itself so this is the code I used to achieve that. EDIT: I changed the code to take data-title (HTML5 compliant) instead for title so that I didn't have to block all titles from default showing:

$(".order_tooltip").simpletip({
    fixed: true,
    position: 'top',
    onBeforeShow: function(){
        this.update(this.getParent().data('title'));
    }
});

回答2:

You can put a close button in the tooltip and make the tooltip hide on click of the close button.

The hide function on the tooltip can be invoked as explained at http://tooltipsy.com/methods.html#method-hide

回答3:

To directly answer your original question, this worked for me:

var hoverHand = false;

    $('.hastip').tooltipsy({
            show: function (e, $el) {
                $el.hover( function() { 
                    hoverHand = true;
                }, function() {
                    hoverHand = false;
                });
                $el.fadeIn(100);
            },
            hide: function (e, $el) {
                var tooltipCloserInterval = setInterval(function(){
                    if (hoverHand == false) {
                        $el.fadeOut(100);
                        $el.off( "mouseenter mouseleave" );
                        clearInterval(tooltipCloserInterval);
                    }
                }, 500);
            }
        });

Essentially, you are giving the user 500ms to move their mouse onto the tooltip using setInterval. After 500ms it is checking if the mouse is still over the tooltip, and if it is not, the tooltip is closed.

来源：https://stackoverflow.com/questions/10735301/how-to-make-tooltipsy-staying-so-a-link-in-it-can-be-clicked

标签

jquery

jquery-plugins

simpletip