Как заставить JQuery Beauty Tip оставаться открытым, пока курсор находится над текстом подсказки?

Question

Я использую jQuery beauty tips (который также использует hoverIntent plugin ), и я хотел бы отобразить ссылку href внутри текста всплывающей подсказки и позволить пользователю нажать наlink.

Однако, как только мы оставляем привязку, текст всплывающей подсказки исчезает через некоторое время (которое мы можем определить)

Поэтому я хотел бы, чтобы текст всплывающей подсказки был открыт в течениетак как пользовательский курсор находится над привязкой ИЛИ текстом всплывающей подсказки.

Как я могу это сделать? Возможно ли это?Я безуспешно пытался что-то вроде:

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

Answer 1

Это возможно. Следующее решение работает с использованием jQuery 1.7 и hoverIntent r5. Я тестировал его в Chrome, Safari, FF 3.7, FF 7 и 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(); 
    },
});

Я снова использовал hoverIntent, на этот раз в поле BeautyTip, чтобы установить флаг («data-hasmouse»), указывающий, продолжает ли курсор мыши парить над всплывающей подсказкой. Пока установлен флаг, новый метод hideTip ничего не будет делать. Вместо этого поле BeautyTip скрывается при срабатывании собственного hoverIntent out.

Answer 2

Привет, спасибо Крис Синелли за ответ выше. Однако проблема с вышеупомянутым решением заключается в том, что подсказка остается, когда мы выходим из привязки, и только щелчок за пределами страницы вызывает ее закрытие.

Однако поведение кажется неправильным, потому что, если всплывающая подсказка всплывет при наведении мыши, то она также должна исчезнуть при отключении мыши (если поведение мыши определено при наведении мыши на это).

Итак, чтобы добиться такого поведения, я внес дополнительные изменения в решение, предоставленное Крисом Синелли.

Решение:

Я определил фиктивный класс toolTipRange для внешнего контейнера, в котором допустимо появление всплывающего окна, и добавил следующий код в событие post show

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

Answer 3

Это лучшее, что я мог сделать на данный момент: добавьте этот код в опцию подсказки.

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

Это работает (по крайней мере, в Firefox), но я бы предпочел использовать hoverintent.