CODEWITHSUNDEEP
jqueryjquery-pluginssimpletip
olofom
olofom

Reputation: 6491

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?

Upvotes: 2

Views: 1095

Answers (3)

dadykhoff
dadykhoff

Reputation: 433

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.

Upvotes: 0

olofom
olofom

Reputation: 6491

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

Upvotes: 2

Arvind Sridharan
Arvind Sridharan

Reputation: 4065

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

Upvotes: 0

Related Questions