单击后，工具提示对 btn-group-toggle 中的单选按钮保持可见答案

【问题标题】：Tooltip stays visible for radio buttons in btn-group-toggle after clicking单击后，工具提示对 btn-group-toggle 中的单选按钮保持可见
【发布时间】：2018-12-27 15:49:05
【问题描述】：

我正在尝试使用btn-group-toggle 来显示带有工具提示的可切换按钮。这可行，但当鼠标在点击后移开时，工具提示不会消失。

$('[data-toggle="tooltip"]').tooltip()

<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.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="btn-group btn-group-toggle" data-toggle="buttons">

  <label class="btn btn-secondary active" data-toggle="tooltip" data-placement="top" title="Tooltip 1">
          <input type="radio" name="options" id="option1" autocomplete="off" checked>#1
        </label>
  <label class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip 2">
          <input type="radio" name="options" id="option2" autocomplete="off">#2
        </label>
</div>

我正在使用 Bootstrap 4.1.3、Popper 1.14.3 和 JQuery 3.3.1。

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

通过添加这个JS解决：

$('[data-toggle="tooltip"]').tooltip()
$('#toggle').click(function() {
  $('[data-toggle="tooltip"]').tooltip("hide");
});

<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.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="btn-group btn-group-toggle" data-toggle="buttons" id="toggle">

  <label class="btn btn-secondary active" data-toggle="tooltip" data-placement="top" title="Tooltip 1">
          <input type="radio" name="options" id="option1" autocomplete="off" checked>#1
        </label>
  <label class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip 2">
          <input type="radio" name="options" id="option2" autocomplete="off">#2
        </label>
</div>

基本上，它在点击时直接隐藏工具提示。

【讨论】：