Newb Newb - 4 months ago 12
jQuery Question

How to put bootstrap popover tooltip in button

How do I put popover tooltip on the first and second buttons?

<div class="btn-group pull-right" data-toggle="buttons" style="top:26px;z-index:2;">
<label class="make-small btn btn-default" id="first_button_func">
<span>First Button</span>
</label>
<label class="make-small filter-column btn btn-default active">
<input type="checkbox" autocomplete="off" checked=""> <span>Second Button</span>
</label>
</div>


I need something like a tooltip "This is the first button"

Answer

As described in tooltips you need to add a

  • data-toggle="tooltip"
  • title="...."

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="btn-group pull-right" data-toggle="buttons" style="top:26px;z-index:2;">
    <label class="make-small btn btn-default" id="first_button_func" data-toggle="tooltip" title="Tooltip test for First Button">
        <span>First Button</span>
    </label>
    <label class="make-small filter-column btn btn-default active"  data-toggle="tooltip" title="Tooltip test for Second Button">
        <input type="checkbox" autocomplete="off" checked=""> <span>Second Button</span>
    </label>
</div>