Bootstrap 带有模式和工具提示的按钮组

Question

我正在尝试在 Bootstrap 中创建一个包含 3 个按钮的按钮组。最后一个 'Delete' 按钮也附加了一个模式。我的代码看起来像这样让 Modal 工作。

<div class="btn-group btn-group-sm">
  <a href="#" class="btn btn-primary" role="button" data-toggle="tooltip" data-placement="top" title="View">V</a>
  <a href="#" class="btn btn-success" role="button" data-toggle="tooltip" data-placement="top" title="Edit">E</a>
  <a href="#" data-target="#deleteModal" class="btn btn-danger" role="button" data-toggle="modal" data-placement="top" title="Delete">D</a>
</div>

以上代码有效，并且按钮很好地分组。模式适用于删除按钮。但是当我执行以下代码以使工具提示和模式在“删除”按钮上工作时，该按钮不再是组的一部分，而是单独成为一个按钮。

<div class="btn-group btn-group-sm">
  <a href="#" class="btn btn-primary" role="button" data-toggle="tooltip" data-placement="top" title="View">V</a>
  <a href="#" class="btn btn-success" role="button" data-toggle="tooltip" data-placement="top" title="Edit">E</a>
  <span data-toggle="modal" data-target="#deleteModal">
    <a href="#" class="btn btn-danger" role="button" data-toggle="tooltip" data-placement="top" title="Delete">D</a>
  </span>
</div>

Answer 1

查看下面我的代码，您可能会找到答案。

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Things You Trird<br><br>

<div class="btn-group btn-group-sm">
  <a href="#" class="btn btn-primary" role="button" data-toggle="tooltip" data-placement="top" title="View">V</a>
  <a href="#" class="btn btn-success" role="button" data-toggle="tooltip" data-placement="top" title="Edit">E</a>
  <span data-toggle="modal" data-target="#deleteModal">
    <a href="#" class="btn btn-danger" role="button" data-toggle="tooltip" data-placement="top" title="Delete">D</a>
  </span>
</div>
<br><br>

<div class="btn-group btn-group-sm">
  <a href="#" class="btn btn-primary" role="button" data-toggle="tooltip" data-placement="top" title="View">V</a>
  <a href="#" class="btn btn-success" role="button" data-toggle="tooltip" data-placement="top" title="Edit">E</a>
  <a href="#" data-target="#deleteModal" class="btn btn-danger" role="button" data-toggle="modal" data-placement="top" title="Delete">D</a>
</div>


<hr>

Things I tried....
<br><br>
<div class="btn-group btn-group-sm">
  <a href="#" class="btn btn-primary" role="button" data-toggle="tooltip" data-placement="top" title="View">V</a>
  <a href="#" class="btn btn-success" role="button" data-toggle="tooltip" data-placement="top" title="Edit">E</a>
  <a href="#" class="btn btn-danger" role="button" data-toggle="tooltip" data-placement="top" title="Delete">
    <span data-toggle="modal" data-target="#deleteModal">D</span>
  </a>
  
</div>



<div id="deleteModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Bootstrap 带有模式和工具提示的按钮组

Bootstrap Button Group with Modal and Tooltip

tooltip

bootstrap-modal

bootstrap-4