Question

我有一个工具提示，显示具有特定类的元素。

工具提示的代码如下所示：

// 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/

Answer 1

创建一个类以禁用工具提示

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

然后你可以用第一个元素作为目标：

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

示例：https://jsfiddle.net/x04hxvqr/3/

Answer 2

创建第二个类，它应该表示工具提示是否处于活动状态。在悬停功能上，仅当元素具有该活动类时才显示工具提示。切换此类可打开和关闭工具提示功能。

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

Here's a fiddle.

<强> Here's an additional fiddle to show toggling the tooltip functionality.

从元素中删除悬停效果

2 个答案:

Here's a fiddle.