您能否运行以下HTML测试用例,以帮助弄清楚在工具提示在按钮上时禁用按钮时,如何使Bootstrap 4 Tooltip消失?有关我的问题的详细信息在代码中列出。
stackoverflow编辑器对将详细信息作为注释不满意,因此我将在此处重复一些详细信息,以使编辑器快乐。当光标徘徊在盘旋上时禁用按钮时,工具提示不会消失,看起来很糟糕。任何帮助。
谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Tooltip Persists, Looks Terrible</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Bootstrap 4 Tooltip Persists, Looks Terrible</h3>
<br> "Other button disabled" scenario works fine.
<br> First, hover over buttons. Look at tooltips while hovering.
<br> Then, click button A to disable button B. Works fine:
<br> - Button B is disabled, and no tooltip.
<br> - Tooltip still works correctly on button A.
<br> <br>
<button type="button" id="button_a" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disables Button B" onclick='change_button ("button_b", true);'>
Button A
</button>
<button type="button" id="button_b" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disabled by Button A">
Button B
</button>
<br> <br> <hr>
<br> "Same button disabled" scenario fails.
<br> First, hover over Button C. Look at the tooltip.
<br> Then, click button C to disable button C. Messes up:
<br> - Button C is disabled, so that part is OK.
<br> - But Button C tooltip persists, looks terrible.
<br> <br>
<button type="button" id="button_c" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disables Button C" onclick='change_button ("button_c", true);'>
Button C
</button>
<button type="button" id="button_d" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Enables Button C" onclick='change_button ("button_c", false);'>
Button D
</button>
<br> <br> <hr> <br>
So if a button is disabled while the cursor is hovering over it, the tooltip persists.
<strong>
Could you please explain how to make tooltip go away when Button C is disabled?
</strong>
I would prefer if tooltip went away when Button C disabled,
since that is default behavior of bootstrap disabled buttons.
And disabled button may later get enabled again, so I do not want to delete title attribute.
Basically I want bootstrap to behave the same way as when Button B is disabled.
I have looked around and cannot find how to fix this problem,
and have tried various things, with no success.
There are real instances where a button carries out an action,
and then the button needs to be disabled, so I appreciate the help. Thanks
</div>
<script>
$(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();});
function change_button (button_id, bool_val) {
var button_obj = document.getElementById (button_id);
button_obj.disabled = bool_val;
}
</script>
</body>
</html>
只需添加到您的 change_button()
函数中,逻辑到 hide
, disable
和 enable
工具提示。
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
function change_button(button_id, bool_val) {
var button_obj = document.getElementById(button_id);
button_obj.disabled = bool_val;
// Disable tooltip
if (bool_val) {
$('#' + button_id).tooltip('hide').tooltip('disable');
} else {
$('#' + button_id).tooltip('enable');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<br> "Other button disabled" scenario works fine.
<br> First, hover over buttons. Look at tooltips while hovering.
<br> Then, click button A to disable button B. Works fine:
<br> - Button B is disabled, and no tooltip.
<br> - Tooltip still works correctly on button A.
<br> <br>
<button type="button" id="button_a" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disables Button B" onclick='change_button ("button_b", true);'>
Button A
</button>
<button type="button" id="button_b" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disabled by Button A">
Button B
</button>
<br> <br>
<hr>
<br> "Same button disabled" scenario fails.
<br> First, hover over Button C. Look at the tooltip.
<br> Then, click button C to disable button C. Messes up:
<br> - Button C is disabled, so that part is OK.
<br> - But Button C tooltip persists, looks terrible.
<br> <br>
<button type="button" id="button_c" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disables Button C" onclick='change_button ("button_c", true);'>
Button C
</button>
<button type="button" id="button_d" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Enables Button C" onclick='change_button ("button_c", false);'>
Button D
</button>
</div>
禁用按钮后必须销毁工具提示。
function change_button(button_id, bool_val) {
var button_obj = document.getElementById(button_id);
$("#" + button_id).tooltip("hide");
button_obj.disabled = bool_val;
}
我是原始海报。我对Azeos感到惊讶的是,这两个答案之间的行为有所不同,因为我看到测试浏览器没有区别,即11和Chrome74。因此,到目前为止,我对两个答案进行了更多测试。这两个答案在原始帖子中修改change_button函数:
function change_button(button_id, bool_val) { /* A */
var button_obj = document.getElementById(button_id);
$("#" + button_id).tooltip("hide");
button_obj.disabled = bool_val;
}
////////
function change_button(button_id, bool_val) { /* B */
var button_obj = document.getElementById(button_id);
button_obj.disabled = bool_val;
if (bool_val) {
$('#' + button_id).tooltip('hide').tooltip('disable');
}
else {
$('#' + button_id).tooltip('enable');
}
}
为了澄清,正确的(与其他引导工具提示一致(的行为是:
- 加载页面
- 按钮C在悬停的工具提示
- 单击按钮c
- 禁用按钮C 和按钮C工具提示消失
- 单击按钮D
- 按钮C已启用,并在悬停的悬停上具有工具提示
这是我进一步测试的结果:
- IE 11(Windows(:两个答案A和B工作
- Chrome 74(Windows(:两个答案A和B工作
- 歌剧60(Windows(:两个答案A和B工作
- Safari 10(Mac(:两个答案A和B工作
- Firefox 67(Windows(:回答A失败,B起作用。
使用Firefox 67,按钮C工具提示不会消失,因为Azeos建议可能是一个问题。
当我有更多时间时,我将进行更多测试。另外,我在github上发布到twbs/bootstrap以将其报告为错误,或者至少是一个问题,并将遵循任何答复。
我使用Lambdatest网站进行Safari测试。我直接在Windows 7桌面上进行了其他测试。
任何其他评论或建议都将不胜感激,例如任何使答案B失败或任何智能手机测试的测试。