show tooltip on hover when button is disabled

Question

I have a button that when pressed it go to disable state till the server update so it go back to enable state

the title = "Test When Disabled" show up when the button is enabled or disabled I just want it to show up when the button is disabled I need to hide it when it's on enabled state

What i'm trying to do is show tooltip only when the button is disabled

here's is my code

HTML

 <asp:Button ID="TestRun" data-toggle="tooltip" 
    title="Test When Disabled" type="button" Text="Run Integration" 
    runat="server" class='button' OnClientClick="RunIntegrationTest()"> 
 </asp:Button>

CSS

.button:disabled {
  border-radius: 5px;
  width: 120px;
  height: 30px;
  margin-top: 10px;
  background-color: red;
  border-color: wheat;
  color: white;
  float: right;
}

.button {
  border-radius: 5px;
  width: 120px;
  height: 30px;
  margin-top: 10px;
  background-color: gray;
  border-color: wheat;
  color: white;
  float: right;
}

.button:hover:disabled {
  border-radius: 5px;
  width: 120px;
  height: 30px;
  margin-top: 10px;
  background-color: gray;
  border-color: wheat;
  cursor: not-allowed;
  float: right;
}

.tooltip {
  position: absolute;
  display: none;
  z-index: 1;
  top: 5px;
  height: 10px;
  display: inline-block;
  padding: 10px;
  color: #000;
}

JS:

function RunIntegrationTest() {
  c = confirm("Are you sure you want to run the integration?");
  if (c) {
    $('#LoadingModal').modal('show');
    document.getElementById("TestRun").disabled = true;
    $(".TestRun").prop("disabled", false)
    $.ajax({

      url: 'Shared/_RunIntegrationMainPage',
      type: 'GET',
      success: function(res) {
        $('#LoadingModal').modal('hide');
        $('#GeneralModal').find('div.modal-title').text('Successfull');
        $('#GeneralModal').find('div.modal-body').html('<p>Run has started. Please wait a few moments and refresh the page to see new the results</p>');
        $('#GeneralModal').modal('show');
      },
      error: function() {
        $('#LoadingModal').modal('hide');
        $('#ErrorModal').modal('show');

      }
    });
  }
}

function myFunc() {
  $(document).ready(function() {
    document.getElementById("TestRun").disabled = true;
  });

}

function myFunc2() {
  $(document).ready(function() {
    document.getElementById("TestRun").disabled = false;
  });
}

C#:

SqlCmd cmd2 = new SqlCmd("EXEC GetLastFlag ");
cmd2.SelectSql();

if (!cmd2.Eof()) {

  if (cmd2.FieldValue("settingValue").ToString() == "Y") {

    ScriptManager.RegisterStartupScript(this, this.GetType(), "", "myFunc();", true);
  } else {
    ScriptManager.RegisterStartupScript(this, this.GetType(), "", "myFunc2();", true);

  }

}

It's a simple thing but I've been trying for too long with no success,

All that I want is to show text when hover in disabled state. Thank you

Answer 1

Remove the title from ASPX file and then check in JavaScript when the button is disabled.

if ($(".TestRun").prop( "disabled")){
    $(".TestRun").prop( "title", "Test When Disabled" );
} else{
    $(".TestRun").prop( "title", "" );
}

It's also nice to add some CSS:

button:disabled{
   cursor: not-allowed;
}

Here's the JSFiddle https://jsfiddle.net/5nckxybm/ .