10 Tooltips

10.1 Static demo

Four options are available: top, right, bottom, and left aligned.

Default Tooltip
Error Message

10.2 Interactive demo

<div class="row">
<div class="col-md-3"><button type="button" class="btn" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button></div>
<div class="col-md-3"><button type="button" class="btn" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button></div>
<div class="col-md-3"><button type="button" class="btn tooltip-error" data-toggle="tooltip" data-placement="right" title="Error on right"> Error on right</button></div>
<div class="col-md-3"><button type="button" class="btn tooltip-error" data-toggle="tooltip" data-placement="bottom" title="Error on bottom"> Error on bottom</button></div>
</div>

10.3 Popovers

<div><button id="popovers" type="button" class="btn btn-tertiary">Click to toggle popover</button></div>
<script class="text/javascript">
    $( document ).ready( function () {
         $("#popovers").popover({
              placement: 'right',
              html: true,
              trigger: 'focus',
              title: 'Popover title'+
                     '<button type="button" id="close" class="close" onclick="$(&quot;#popovers&quot;).popover(&quot;hide&quot;);">&times;</button>',
              content: 'And here\'s some amazing content. It\'s very engaging. Right? <a href=\'#\'>PrestaShop</a>'
         });
     });
</script>