Bootstrap Button Group with Modal and Tooltip - tooltip

Question

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">
V
E
D
</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">
V
E
<span data-toggle="modal" data-target="#deleteModal">
D
</span>
</div>

Answer 1

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">
V
E
<span data-toggle="modal" data-target="#deleteModal">
D
</span>
</div>
<br><br>
<div class="btn-group btn-group-sm">
V
E
D
</div>
<hr>
Things I tried....
<br><br>
<div class="btn-group btn-group-sm">
V
E
<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">×</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>