使 Materialise CSS 工具提示在悬停在它们上方时保持不变

Question

我目前正在处理的一个问题是，当您将鼠标悬停在 SVG 元素的一部分上时会显示工具提示，在鼠标移出时会正常消失，但前提是鼠标不会越过工具提示本身。我们正在使用带有工具提示组件的 Materialize CSS。 下面是我的一段代码。

<svg width="400" height="400">
    <rect x="190" y="255" width="70" height="25" class="fixture good tooltipped" id="ines" data-position="top" data-delay="50" data-tooltip="Carbonated Drinks<br><a href='#'>View More</a>"" data-html="true"/>
</svg>

如您所见，我想要这样做的原因是，如果用户将鼠标悬停在实际的工具提示上，他们可以单击“查看更多”链接。但是，目前，即使您将鼠标放在工具提示上，工具提示也会消失。

我知道这可以通过其他框架/库来完成，但到目前为止我无法在 Materialize CSS 中做到这一点。

有谁知道这是否可能，因为广泛的互联网搜索一无所获。

Answer 1

Materialize tooltip 为每个涉及的 dom 节点分配一个 "mouseleave.tooltip" 事件处理程序。

当你离开 dom 元素时触发此事件，并在 225 毫秒后（详情请参阅source code）隐藏提示。

此外，工具提示的样式pointer-events 等于无：无法触发鼠标事件，因此您的锚点将永远无法点击。

为了克服所有这些步骤，一种可能性是：

• 保存 jQuery mouseout 事件对象
• 从 jQuery 处理程序中删除前一个对象，因此不会触发 mouseleave.tooltip。
• 处理每个工具提示的 jQuery 悬停事件（具有类：material-tooltip）：这是为了保存一个属性，以测试鼠标在工具提示中的位置
• 在 mouseenter 上为您的元素将指针事件设置为默认自动
• 以同样的方式在 mouseleave 上设置一个小于 225 毫秒的超时，以测试鼠标是否在工具提示上：如果没有，则执行标准 jQuery materialize mouseleave.tooltip 事件
• 在鼠标离开工具提示时，执行与上一点相同的步骤。

sn-p (jsfiddle)：

$(function () {

    var x = jQuery._data( document.getElementById('ines'), "events" )['mouseout'][0];
    delete jQuery._data( document.getElementById('ines'), "events" )['mouseout'];
    $('.material-tooltip').hover(function(e) {
        $(this).attr('hover', 1);
    }, function(e) {
        $(this).attr('hover', 0);
        x.handler.apply( document.getElementById('ines'), x);
    });
    $('#ines').on('mouseenter', function(e) {
        $('.material-tooltip:visible').css('pointer-events', 'auto');
    }).on('mouseleave', function(e) {
        setTimeout(function() {
            var val = $('.material-tooltip:visible').attr('hover');
            if (val == undefined || val == 0) {
                x.handler.apply( document.getElementById('ines'), x);
            }
        }, 150);
    })


});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>


<svg width="400" height="400">
    <rect x="190" y="155" width="70" height="25" class="fixture good tooltipped" id="ines" data-position="top"
          data-delay="50" data-tooltip="Carbonated Drinks<br><a href='#'>View More</a>"
          data-html="true"/>
</svg>