Question

我正在尝试使用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。

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

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

单击后，btn-group-toggle中的单选按钮的工具提示仍然可见

1 个答案: