How to enable tooltip on disabled button in javascript?

user_14989533 0
Viewed 2703

I have a disabled button and i want it to show a tooltip but change it when i enable it again. How do i get this to work i can only use HTML, javascript and css. This is the button

<div class="right-item"><button class="button ripple" id="print" onclick="printDiv('qr-code')" disabled="disabled">Drucken</div>

button html javascript
3 Answers

Use title

function toggle() {
  var button = document.getElementById('button');
  if (button.disabled) {
    button.disabled = false;
    button.setAttribute('title', 'Enabled title');
  } else {
    button.disabled = true;
    button.setAttribute('title', 'Disabled title');
  }
}
<button onclick="toggle()">Toggle enable/disable</button>
<button disabled title="Enabled title" id="button">Hover on me</button>

user_78257380

<button disabled title="Hello">Hover on me</button>

This code will show same tool tip for both disabled or enabled button. Have a function which checks the status of button and apply the title value based on it.

user_152282210

You need to add Javascript when you enable button.

In jQuery:

$('#yourElementId').attr('title', 'your new title');

In Javascript:

var myBtn= document.getElementById("yourElementId");
myBtn.setAttribute('title','mytitle');
user_90761750
Related