Question

您能否运行以下html测试用例，以帮助弄清楚当工具提示位于按钮上方时禁用按钮时如何使bootstrap 4工具提示消失？有关我的问题的详细信息在代码中列出。

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>

Answer 1

只需将hide，disable和enable工具提示的逻辑添加到您的change_button()函数中即可。

$(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>

Answer 2

禁用按钮后，您必须销毁工具提示。

  function change_button(button_id, bool_val) {
    var button_obj = document.getElementById(button_id);
    $("#" + button_id).tooltip("hide");
    button_obj.disabled = bool_val;
  }

Answer 3

我是原始海报。我惊讶于azeos的建议，即两个答案之间的行为不同，因为在测试浏览器IE 11和chrome 74中没有发现差异。因此，到目前为止，我对这两个答案进行了更多测试。这两个答案都修改了原始帖子中的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（窗口）：回答A和B均有效
歌剧60（windows）：回答A和B的工作
野生动物园10（mac）：回答A和B均有效
firefox 67（Windows）：回答A失败，B起作用。

使用firefox 67时，Button C工具提示没有消失，因为azeos建议可能是一个问题。

当我有更多时间时，我将进行更多测试。另外，我在github上的twbs / bootstrap上发布了此消息，以将其报告为错误或至少是问题，并将跟踪任何响应。

我使用lambdatest网站进行野生动物园测试。我直接在Windows 7桌面上进行了其他测试。

我们将不胜感激任何其他评论或建议，例如使答案B失败的任何测试或任何智能手机测试。

Bootstrap 4工具提示持续存在，看起来很糟糕

3 个答案: