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

Add Comment
1 Answer(s)

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

Answered on August 30, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.