Question

我正在尝试通过将悬停事件处理程序附加到具有title属性的元素来创建自定义工具提示。

代码适用于页面加载时的元素，但是当我尝试合并动态元素时，当我的鼠标离开目标元素时，工具提示不会消失。

显示工具提示

Urb.showTooltip = function() {
    var $element = $(this);
    var $tooltip = $element.data('tooltip');
    var $tip = $element.attr('title');

    console.log('show');

    if(!$tooltip) {
        // create a tooltip element
        $tooltip = $('<div />');
        $tooltip.addClass('tooltip');
        $tooltip.text($tip);
        Urb.$body.append($tooltip);

        // position the tooltip
        Urb.positionTooltip($tooltip, $element);
        $element.data('tooltip', $tooltip);

        // activate custom tooltip and deactivate browser tooltip
        $tooltip.addClass('active');
        $element.attr('tooltip', $tip);
        $element.removeAttr('title');
    } else {
        // position and activate custom tooltip
        Urb.positionTooltip($tooltip, $element);
        $tooltip.addClass('active');
    }
};

隐藏工具提示

Urb.hideTooltip = function() {
    var $element = $(this);
    var $tooltip = $element.data('tooltip');

    console.log('hide');

    if($tooltip){
        $tooltip.removeClass('active');
    }
};

注意：Urb只是我作为项目名称空间创建的全局对象。

所以，没有什么可疯狂的。我最初将工具提示逻辑附加到jQuery的.hover()函数：

$('[title]').hover( Urb.showTooltip, Urb.hideTooltip );

这很好用，但现在，当我尝试将事件附加到动态元素时，Urb.hideTooltip根本没有被调用，因为它甚至没有将“隐藏”记录到我的控制台。 / p>

Urb.$body.on('mouseover', '[title]', Urb.showTooltip);
Urb.$body.on('mouseleave', '[title]', Urb.hideTooltip);

注意：Urb.$body是对$('body')

的引用

为什么不调用hideTooltip函数？我错过了什么？

Answer 1

解决方案1 

使用:hover伪元素与:after一起使用仅限CSS的content: attr( title ) )工具提示。

请参阅：W3schools

警告：这不是适用于所有浏览器，例如IE，每次都会落后......;）

解决方案2

我稍微重写了你的代码，以避免引用错误等。唯一缺少的是定位功能。

编辑：现在它没有使用单个工具提示<div>，但是在首次悬停时为每个项目设置了工具提示<div>，方法是删除{{1}并在使用它来创建工具提示title。

之后

看看：

＆＃13;

<div>

＆＃13;

var Urb = {};

Urb.showTooltip = function() {
    // Get current element
    var $element = $(this);

    // Get tooltip data (if it's there)
    var tooltipText = $element.data('tooltip');

    // Get title for backup
    var tip = $element.attr('title');

    console.log('show');

    // If title is still set, set it to tooltip data and remove title attribute
    if( typeof tip !== undefined && tip !== false) {
        // Remove title attribute
        $element.removeAttr('title');
        // Create new tooltip div
        var $newTip = $('<div />').addClass('tooltip').text( tip );
        // Append it to the element
        $element.append( $newTip );
    }

    $element.find('div.tooltip').addClass('active');
    
};


Urb.hideTooltip = function() {

    console.log('hide');

    // Empty tooltip div and deactivate it
    $(this).find('div.tooltip').removeClass('active');

};



var last_item_nr = 3;

function addItem() {
  var next_nr = ++last_item_nr;
  
  $elm = $('<div></div>');
  
  $elm
    .html('Item ' + next_nr + '<div class="tooltip">Tooltip for item ' + next_nr + '</div>' )
    .hover( Urb.showTooltip, Urb.hideTooltip );
  
  $('#items').append( $elm );
  
  console.log( 'Added item ' + next_nr );
}


$( document ).ready(function() {

  Urb.$body = $('body');

  $('#items > div').hover( Urb.showTooltip, Urb.hideTooltip );

});

＆＃13;

#items > div {
    position: relative;
    float: left;
    clear: left;
    width: 200px;
    border: 1px solid #eee;
}

#items > div > .tooltip {
    position: absolute;
    top: 0px;
    left: 100%;
    background-color: #ccc;
    opacity: 0;
}

#items > div > .tooltip.active {
   opacity: 1;
}

＆＃13;

Answer 2

天啊，我简直不敢相信我没想到这个!!!

在我的showTooltip函数中，我删除了title属性！

真是个白痴!!

$element.removeAttr('title');

因此，当工具提示显示时，动态元素检查停止工作。我注释掉了这行代码并且它有效。

现在，我只需要弄清楚如何阻止浏览器工具提示显示。

<强>更新

原来我确实需要删除title属性才能禁用浏览器工具提示。所以，我对我的动态选择器进行了一些更改。

 // showTooltip
 $element.attr('data-title', $tip);
 $element.removeAttr('title');

 // window.load
 Urb.$body.on('mouseover', '[title], [data-title]', Urb.showTooltip);
 Urb.$body.on('mouseleave', '[title], [data-title]', Urb.hideTooltip);

动态元素上的jQuery事件不起作用

2 个答案: