CODEWITHSUNDEEP
javascripthtmlbutton
obind
obind

Reputation: 195

How to enable tooltip on disabled button in javascript?

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>

Upvotes: 5

Views: 9598

Answers (3)

Neha
Neha

Reputation: 2261

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

Upvotes: 1

SatishChauhan
SatishChauhan

Reputation: 21

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

Upvotes: 2

Lundstromski
Lundstromski

Reputation: 1247

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>

Upvotes: 5

Related Questions