JSFiddle - React, Tailwind, and code Playground

by Maykhel David

HTML

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
 Popover Kiri
</button>
<br/>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover atas
</button>
<br/>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover bawah
</button>
<br/>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover kanan
</button>

CSS

button {margin:100px 0 100px 300px;}

JavaScript

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});