html - 使 Materialise CSS 工具提示在悬停在其上方时保持不变

Question

我目前正在做的一个工作是调用当您将鼠标悬停在 SVG 元素的一部分上时显示的工具提示，在鼠标移开时正常消失，但前提是鼠标不会越过工具提示本身。我们使用的是 Materialise 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>

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

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

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

Answer 1

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

一旦离开 dom 元素，就会触发此事件，225 毫秒后(详细信息请参阅 source code )，tootip 将被隐藏。

此外，工具提示的样式为 pointer-events等于 none:无法触发鼠标事件，因此您的 anchor 永远不可点击。

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

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

代码片段(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>