<!-- Basic Popover -->
<button type="button" class="btn mb-1 btn-primary btn-pill" data-toggle="popover" title="Popover Title"
  data-content="Lorem ipsum dolor sit amet consectetur elit sed do.">Launch popover</button>

<!-- Four Directions Popover -->
<button type="button" class="btn mb-1 btn-info btn-pill" data-container="body" data-toggle="popover"
  data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top
</button>

<button type="button" class="btn mb-1 btn-warning btn-pill" data-container="body" data-toggle="popover"
  data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right"> Popover on right
</button>

<button type="button" class="btn mb-1 btn-danger btn-pill" data-container="body" data-toggle="popover"
  data-placement="bottom" data-content="Vivamus	sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom
</button>

<button type="button" class="btn mb-1 btn-dark btn-pill" data-container="body" data-toggle="popover"
  data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left"> Popover on left
</button>


<!-- Dismiss on Next Click Popover -->
<a tabindex="0" class="btn btn-lg btn-success btn-pill" role="button" data-toggle="popover" data-trigger="focus"
  title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible
  popover</a>


                        

  
<!-- Basic Tooltip -->
<button type="button" class="btn btn-primary btn-pill" data-toggle="tooltip" data-placement="right" title="Tooltip on top">
  Tooltip on top
</button>

<!-- Four Directions Tooltip -->
<button type="button" class="btn btn-primary btn-pill mb-4" data-toggle="tooltip" data-placement="top"  title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-info btn-pill mb-4" data-toggle="tooltip" data-placement="left"  title="Tooltip on left">
  Tooltip on left
</button>
<button type="button" class="btn btn-secondary btn-pill mb-4" data-toggle="tooltip" data-placement="bottom"  title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-success btn-pill mb-4" data-toggle="tooltip" data-placement="right"  title="Tooltip on right">
  Tooltip on right
</button>

<!-- Dismiss on Next Click Tooltip -->
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary btn-pill btn-lg" style="pointer-events: none;" type="button" disabled>Disabled
    button</button>
</span>