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>

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

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

有没有人知道这是否可行，因为广泛的互联网搜索没有任何结果。

Answer 1

Materialize tooltip为每个相关的dom节点分配 ＆＃34; mouseleave.tooltip＆＃34; 事件处理程序。

只要您离开dom元素就会触发此事件，在225毫秒后（有关详细信息请参阅source code），将隐藏该文件。

此外，工具提示的样式pointer-events等于无：不能触发任何鼠标事件，因此您的锚点永远不会被点击。

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

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

代码段（jsfiddle）：

＆＃13;

$(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);
    })


});

＆＃13;

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

＆＃13;

制作实体化CSS工具提示在将鼠标悬停在它们上方时保持不变

1 个答案: