文章/答案/技术大牛

发布

社区首页 >问答首页 >引导4工具提示仍然存在，看起来很糟糕

问引导4工具提示仍然存在，看起来很糟糕
EN

Stack Overflow用户

提问于 2019-06-26 05:25:36

回答 3查看 422关注 0票数 0

请您运行以下html测试用例，以帮助了解如何在工具提示位于按钮上方时禁用按钮时，引导4工具提示消失？有关我的问题的细节列在代码中。

堆栈溢出编辑器对我将细节作为注释放在代码中并不满意，因此我将在这里重复一些细节，以使编辑器高兴。当一个按钮被禁用时，光标在它上面盘旋，工具提示不会消失，它看起来很糟糕。任何帮助都很感激。

谢谢

 <!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>

jquery

css

twitter-bootstrap

bootstrap-4

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-06-26 05:45:50

只需将逻辑添加到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>

票数 1

Stack Overflow用户

发布于 2019-06-26 05:51:57

你必须在按钮被禁用后销毁工具提示。

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

票数 0

Stack Overflow用户

发布于 2019-06-27 17:27:57

我是原创海报。我感到惊讶的是，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在悬停时有工具提示
单击Button C
按钮C已禁用，和按钮C工具提示消失
单击Button D
按钮C已启用，并再次悬停在工具提示上

以下是我进一步测试的结果：

IE 11 (窗口)：答案A和B
chrome 74 (windows)：答案A和B都有效
歌剧60 (窗户)：答案A和B
safari 10 (mac)：答案A和B都有效
firefox 67 (窗口)：答A失败，B有效。

在firefox 67中，Button C工具提示并没有消失，正如azeos所指出的那样，这可能是一个问题。

当我有更多的时间，我会做更多的测试。另外，我在github上发布到twbs/bootstrap，将其报告为一个bug，或者至少是一个问题，并将跟踪任何响应。

我用最轻的网站进行旅行测试。我在windows 7桌面上直接做了其他测试。

任何其他意见或建议将不胜感激，如任何测试，使答案B不及格，或任何智能手机测试。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56765755

复制

相似问题

问引导4工具提示仍然存在，看起来很糟糕
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4工具提示仍然存在，看起来很糟糕EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4工具提示仍然存在，看起来很糟糕
EN