JS - Popover 4 Arrow

by r_costa

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<div style="margin: 50px;">
  <button type="button" class="btn btn-secondary" title="Title" data-toggle="popover" data-placement="bottom" data-content="Message." data-trigger="focus">
    Button
  </button>
</div>

CSS

.popover.bs-tether-element-attached-top::after,
.popover.bs-tether-element-attached-top::before{
  left: 65%;
}

JavaScript

$('[data-toggle="popover"]').popover();