JSFiddle - React, Tailwind, and code Playground

by ItsLeeOwen

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div><button class="btn btn-default">TOGGLE POPOVER</button></div>
<hr />
<div id="stuff">SOME STUFF</div>

CSS

#stuff {
    padding: 10px 0px;
}

div {
    text-align: center;
}

button {
    margin: 10px;
}

JavaScript

$('#stuff').popover({
    html: true,
    placement: 'bottom',
    content: function() {
        return "<h4>HELLO THERE</h4>";
    }
});

var on = false;
$('.btn').on('click', function() {
    on = !on;
    if (on)
        $('#stuff').popover('show');
    else
        $('#stuff').popover('destroy');
})