Question

我想隐藏悬停在此元素上时显示的工具提示（使用Materialise CSS）

<li><a class="btn-floating green" onclick="window.print();return false;"><i class="material-icons tooltipped" data-position="left" data-delay="50" data-tooltip="Print schedule">print</i></a></li>

问题在于，当我点击按钮时，它立即显示打印层，我在打印页面上看到工具提示（它将随页面一起打印）。我想在单击打印按钮时隐藏工具提示。
提前谢谢。

Answer 1

使用工具提示上的close命令为我工作：

$('.tooltipped').tooltip('close');

Answer 2

删除tooltipped类

<li>
 <a class="btn-floating green" onclick="window.print();return false;">
  <i class="material-icons" data-position="left" data-delay="50" data-tooltip="Print schedule">print</i>
 </a>
</li>

Answer 3

尝试两者或其中任何一个：

//for right or left click(any)
$('.tooltipped').mousedown(function(){
  $('.material-tooltip').css("visibility", "hidden");
});

// leaving after click in case you open link in new tab
$('.tooltipped').mouseleave(function(){
  $('.material-tooltip').css("visibility", "hidden");
});

Answer 4

由于JS干扰CSS，所以我建议使用事件onbeforeprint和onafterprint。 https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint

Answer 5

您需要执行此操作，它对我有用。

  $('#search_button').click(function(){ 

        // hide all tooltips
        $('.tooltipped').tooltip('close');

        // now you must re-open tooltip, otherwise, it will stay close state
        $('.tooltipped').tooltip(); 

}

隐藏工具提示实现CSS

5 个答案: