禁用按钮时在悬停时显示工具提示

Posted 2023-03-06

【中文标题】禁用按钮时在悬停时显示工具提示

【英文标题】：show tooltip on hover when button is disabled

【发布时间】：2020-12-03 08:51:57

【问题描述】：

我有一个按钮，当按下它时它会进入禁用状态，直到服务器更新，所以它会返回启用状态

title = "Test When Disabled" 在按钮被启用或禁用时显示我只想在按钮被禁用时显示我需要在它处于启用状态时隐藏它

我要做的是仅在按钮被禁用时显示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);

  

这是一个简单的事情，但我已经尝试了太久没有成功，

我想要的只是在禁用状态下悬停时显示文本。 谢谢

【问题讨论】：

disabled 元素不会也不能引发事件。要实现您的要求，您需要以编程方式阻止按钮上的任何事件，而无需实际禁用它

title="Test When Disabled" 即使在按钮被禁用时也会显示，但在按钮启用时我无法隐藏它。任何建议都会非常感谢你

【参考方案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/。