Как отобразить всплывающую подсказку отключенной материализованной кнопки

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> сам. Таким образом, вы должны управлять всплывающей подсказкой <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>