Search code examples
tooltipbootstrap-modalbootstrap-4

Bootstrap Button Group with Modal and Tooltip

I am trying to create a Button Group in Bootstrap with 3 buttons. The last 'Delete' button also has a Modal attached to it. My code looks like this to get the Modal to work.

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

Above code works and buttons are nicely grouped. The Modal works on the Delete button. But when I do below code to get the tooltip and modal to work on the Delete button, the button is not part of the group anymore and becomes a button on its own.

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

  • See my code below and you may find your answer.

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