How to make jQuery Beauty Tip stay open as long as the cursor is over the tooltip text?

Question

I am using jQuery beauty tips (which is also using hoverIntent plugin) and I would like to display an href link inside the tooltip text and allow the user to click on the link.

However, as soon as we leave the anchor, the toottip text disappears after some timeout (that we can define)

So I would like to keep the the tooltip text opened as long as the user cursor is over the anchor OR the tooltip text.

How can I do that? Is it possible? I tried, without success, something like:

$('.bt').bt({
postShow: function(box) {
  $(".bt-content").hoverIntent({
    timeout : 500,
    over: function() {
      $(".bt-wrapper").show(); //or $(".bt-active").btOn();
    }
  });
}
})

score 2 · Answer 1 · answered Jul 03 '12 at 14:24

It is possible. The following solution works using jQuery 1.7 and hoverIntent r5. I tested it in Chrome, Safari, FF 3.7, FF 7 and IE8.

$('.bt').bt({
    postShow: function(box) {
        $(box).hoverIntent({
            over: function() {
                    $(this).data('hasmouse', true);
            },
            out: function() {
                    $(this).data('hasmouse', false);
                    $(box).hide();
            },
            timeout: 300,
        });
    },
    hideTip: function(box, callback) {
        if ($(box).data('hasmouse')) {
            return;
        }
        $(box).hide();
        callback(); 
    },
});

I used hoverIntent again, this time on the BeautyTip box, to set a flag ("data-hasmouse") indicating whether the mouse courser is still hovering over the tooltip. As long as the flag is set, the new hideTip method will do nothing. Instead, the BeautyTip box is hidden when its own "hoverIntent out" fires.

score 1 · Answer 2 · answered Nov 19 '10 at 01:46

This is the best I could do so far: Add these code on the option of the tip.

trigger: ['mouseenter','click'],
postShow: function(box){
  var that = this;
  $(box).bind('mouseleave',function() {
     that.btOff();
  });
},

It works (at least on Firefox) but I would prefer to use the hoverintent.

score 1 · Answer 3 · answered Nov 29 '10 at 09:16

Hi thankx Chris Cinelli for the above reply. However the problem with the above solution is the tooltip remains as we move out of anchor, and only a click outside the page will trigger its closure.

However the behaviour seems to be improper, because if tooltip popups on mouse over then should also disappear onmouseout (if the behavious is defined on mouse over so).

So to achieve that behaviour i had done additional changes to that of the solution provided by chris cinelli.

Solution :

I have defined a dummy class toolTipRange to the outer container within which appearance of popup is valid and added the following code in the post show event

$(".toolTipRange").bind('mouseleave',function(event) {
  if(event.relatedTarget.nodeName != "CANVAS") {
    that.btOff();
  }
});

How to make jQuery Beauty Tip stay open as long as the cursor is over the tooltip text?

3 Answers3