Materialise Css工具提示仅在onclick时显示

Question

点击时我需要显示工具提示。这是我的代码。请帮我这个

<a href="javascript:;" class="tooltipped info_circle" data-position="bottom" data-delay="50" data-tooltip="Numbers should MUST be 5 digits. Nothing more, nothing less"><i class="fa fa-info-circle"></i></a>

Answer 1

 <a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="Numbers should MUST be 5 digits. Nothing more, nothing less">Hover me!</a>

另外，请查看浏览器与Materialise CSS的兼容性

您还可以尝试“ onmouseover ”活动。

enter image description here

Answer 2

这里是1.0.0版的有效解决方案，可能在较早的版本中可以使用。单击按钮（事件onclick）时，应该初始化工具提示，然后在onmouseleave事件中销毁实例。

JQuery示例：

$('.tooltipped-click').click(function() {
  $(this).tooltip();
  $(this).tooltip('open');
});
    
$('.tooltipped-click').mouseleave(function() {
  if ($(this).tooltip()){
    $(this).tooltip('destroy');
  }
});

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


<a href="javascript:;" class="tooltipped-click info_circle btn" data-position="bottom" data-delay="50" data-tooltip="Numbers should MUST be 5 digits. Nothing more, nothing less"><i class="fa fa-info-circle"></i> Click Me!</a>

纯Java脚本示例：

function createTooltip(){
  var elems = document.querySelectorAll('.tooltipped-click');
  var options={enterDelay: 50};
  var instances = M.Tooltip.init(elems, options);

  var instance = M.Tooltip.getInstance(document.getElementById("button"));
  instance.open();
}
function destroyTooltip(){
  var instance = M.Tooltip.getInstance(document.getElementById("button"));
  if (instance){
    instance.destroy();
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> 


<a href="javascript:;" id="button" onclick="createTooltip();" onmouseleave="destroyTooltip();" class="tooltipped-click info_circle btn" data-position="bottom" data-delay="50" data-tooltip="Numbers should MUST be 5 digits. Nothing more, nothing less"><i class="fa fa-info-circle"></i> Click me!</a>