[英]show tooltip on hover when button is disabled
我有一个按钮,当按下它 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 时显示文本。 谢谢
从 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/ 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.