Как сделать «липкую» подсказку, которая открывается по щелчку, закрывается по щелчку вне самой подсказки?

Question

У меня есть подсказка, которая установлена ​​на липкий и открывается, когда кто-то нажимает на ссылку. Я также установил кнопку закрытия на подсказке, и все это прекрасно работает. Я хочу закрыть подсказку, если кто-то нажимает вне подсказки в дополнение к текущей кнопке закрытия. Я ищу решение для всплывающего окна, просто закрытие клика за пределами подсказки.

Answer 1

Вот как я это сделал:

    onShow: function() {
        // close cluetip when users click outside of it
        $(document).click(function(e) {
            var isInClueTip = $(e.target).closest('#cluetip');
            if (isInClueTip.length === 0) {
                $('.cluetip-default').hide();
            }
        })
    },

Answer 2

Согласно FAQ, есть метод API, позволяющий вам инициировать закрытие:

Новое с clueTip 1.0.3: Как программно закрыть (скрыть) подсказку? Если вы хотите вызвать закрытие подсказки, основываясь на каком-либо другом взаимодействии, вы можете использовать следующий код: $(document).trigger('hideCluetip');

Так что я думаю, вы могли бы сделать что-то вроде этого:

$('#myCluetip').cluetip({
  onShow: function() {
    $(document).one('mousedown',function() {
      $(document).trigger('hideCluetip');
    })
  });
});

Это работает, привязывая одноразовый обработчик события mousedown к телу документа, который затем запускает событие, которое, по словам людей Cluetip, скрывает открытые Cluetips. Использование одноразового обработчика событий означает, что вы не отправляете триггер hideCluetip каждый раз, когда кто-то нажимает на что-либо.

Answer 3

Решение Стоуни у меня не сработало.

Я использовал решение @Gary Green, и оно работает нормально - но это все еще не то решение, которое требовалось "закрыть при наведении / наведении мыши".

Наконец, я понял, что сам Cluetip предоставляет способ сделать это.

Просто установите значение "mouseOutClose: false", например, так:

$("#myForm :input").cluetip(
    {
        sticky: true, 
        closePosition: 'title', 
        arrows: true,
        mouseOutClose: true
    }
);

Answer 4

Было бы полезно увидеть ваш код, но в любом случае вы можете сделать что-то в этом духе;

$(document).click(function(e) {
    if (!$(e.target).hasClass('cluetip'))
    {
      // Close the cluetip here.  
    }
});