CODEWITHSUNDEEP
htmlcssmaterialize
Mask
Mask

Reputation: 573

How to display tooltip of a disabled materialized button

I tried using solution on the web but can't get working I want to display tooltip of a disabled button. I use materialized css.

Here is my html of button:-

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

Upvotes: 1

Views: 595

Answers (1)

SMAKSS
SMAKSS

Reputation: 10520

Actually you can't enable the tooltip for the disabled <button> or <a>, but you can do a trick and wrap your button inside a <span> then add the tooltip to that <span> element instead of <button> itself. So you have to manage the <span> tooltip in enabling/disable events.

So your code should be something like this: 

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>

Upvotes: 1

Related Questions