如何显示禁用的实体化按钮的工具提示

Question

我尝试使用网络上的解决方案，但无法正常工作我想显示已禁用按钮的工具提示。我用物化css.

这是我的 html 按钮：-

<div class="input-field col s7">
<button id="btn" class="btn blue-grey tooltipped" data-tooltip="Button will be Enabled after file upload" disabled>Submit</button>
</div>

Answer 1

实际上你不能为残疾人 <button> 或 <a> 启用工具提示，但你可以做一个技巧，将你的按钮包裹在 <span> 中，然后将工具提示添加到<span> 元素而不是 <button> 本身。因此，您必须在 enabling/disable 事件中管理 <span> 工具提示。

所以你的代码应该是这样的：

document.addEventListener("DOMContentLoaded", function() {
  var elems = document.querySelectorAll(".tooltipped");
  var instances = M.Tooltip.init(elems);
});

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

<div class="input-field col s7">
  <span class="tooltipped" data-tooltip="Button will be Enabled after file upload">
    <button id="btn" class="btn blue-grey" disabled>Submit</button>
  </span>
</div>

如何显示禁用的实体化按钮的工具提示

How to display tooltip of a disabled materialized button

html

css

materialize