禁用按鈕時在 hover 上顯示工具提示

Question

我有一個按鈕，當按下它 go 以禁用 state 直到服務器更新，因此它 go 重新啟用 Z9ED39E2EA9A64185

title = "Test When Disabled"在啟用或禁用按鈕時顯示 我只想在禁用按鈕時顯示它 我需要在啟用時隱藏它 state

我要做的是僅在禁用按鈕時顯示tooltip

這是我的代碼

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

  }

}

這是一個簡單的事情，但我已經嘗試了太久沒有成功，

我想要的只是在禁用 state 的 hover 時顯示文本。 謝謝

Answer 1

從 ASPX 文件中刪除title ，然后在禁用按鈕時簽入 JavaScript。

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

添加一些 CSS 也很好：

button:disabled{
   cursor: not-allowed;
}

這是 JSFiddle https://jsfiddle.net/5nckxybm/ 。