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

#jquery #cluetip

#jquery #подсказка

Вопрос:

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

Ответ №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();
            }
        })
    },

Ответ №2:

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

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

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

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

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

1. В итоге я воспользовался этой концепцией использования hideClueTip, но связывал и развязывал события для наведения курсора мыши с помощью крючков OnShow и onHide в зависимости от того, был ли щелчок в подсказке или нет (я решил закрыть подсказку при щелчке за пределами подсказки).

2. @mornos — вы можете опубликовать свое решение?

Ответ №3:

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

Я использовал решение @ Gary Green, и оно работает нормально, но это все еще не точное решение «закрыть при наведении курсора мыши», которое я хотел.

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

Просто установите значение «mouseOutClose: false», вот так:

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

Ответ №4:

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

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