удалить эффект зависания из элемента

#jquery

#jquery

Вопрос:

У меня есть всплывающая подсказка, отображаемая для элементов с определенным классом.

Код для всплывающей подсказки выглядит следующим образом:

 // Tooltip only Text
$('.masterTooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX   20; //Get X coordinates
        var mousey = e.pageY   10; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })
});
  

Я ищу способ отключить всплывающую подсказку для определенных элементов.
Мои первые попытки включали избавление от класса .masterTooltip
думая, что этого будет достаточно.

После некоторого чтения я понимаю, что за эффект зависания отвечает не сам класс, а элемент, у которого есть класс. Таким образом, удаление класса ничего не изменит.

Есть какие-либо советы о том, как удалить и повторно добавить функцию всплывающей подсказки?

Вот пример с упрощенной версией:https://jsfiddle.net/bald1/x04hxvqr/1 /

Ответ №1:

Создайте класс, чтобы отключить всплывающую подсказку

 .no-tooltip {
  pointer-events: none;
}
  

Затем вы можете настроить таргетинг на первый элемент с помощью:

 $('.masterTooltip').first().toggleClass('no-tooltip')
  

Пример:https://jsfiddle.net/x04hxvqr/3 /

Комментарии:

1. Спасибо за ответ. Оба ответа были похожи, поэтому я выбрал приведенный выше, потому что это было немного быстрее. Спасибо.

Ответ №2:

Создайте второй класс, который должен указывать, активна всплывающая подсказка или нет. В вашей функции наведения выводите всплывающую подсказку, только если элемент имеет этот активный класс. Переключите этот класс, чтобы включать и выключать функциональность всплывающей подсказки.

 $(".masterTooltip").hover(function() {
    if ($(this).hasClass("tooltip-active")) {
        // your code to display tooltip
    }
} ...)
  

Вот скрипка.


Вот дополнительная скрипка, чтобы показать переключение функциональности всплывающей подсказки.