JSFiddle - React, Tailwind, and code Playground

by Alon Rotem

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<div class="bs-example">
    <button type="button" class="btn btn-primary" data-toggle="popover"  data-content="Default popover">Popover</button>
</div>

CSS

.btn {
    margin: 200px;
}

JavaScript

$(document).ready(function () {

    $('[data-toggle="popover"]').popover({
        placement: 'bottom',
        delay: {
            show: 500,
            hide: 100
        }
    });

    $('[data-toggle="popover"]').click(function () {
        
        setTimeout(function () {
            $('.popover').fadeOut('slow');
        }, 5000);

    });

});