2

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?

olofom
  • 6,233
  • 11
  • 37
  • 50

3 Answers3

2

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'));
    }
});
olofom
  • 6,233
  • 11
  • 37
  • 50
0

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

Arvind Sridharan
  • 3,885
  • 4
  • 29
  • 54
  • Thanks, but there might be hundreds of links with these tooltips attached to them, so there shouldn't be any clicking involved. I can make it stay for a specified time after mousout of the link, but I'd like to be able to do something like .hover() on the tooltip window so it stays open as long as the mouse is on it. – olofom May 24 '12 at 11:46
0

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.

dadykhoff
  • 423
  • 5
  • 15