如何在 javascript 中的禁用按钮上启用工具提示？

Question

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>

Answer 1

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

Answer 2

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>

Answer 3

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');