show tooltip on hover when button is disabled

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0