JSFiddle - React, Tailwind, and code Playground

by williammanco

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<p id="tool" class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>

<div id="myDiv">
    <a id="pop" 
        href="#" 
        class="btn btn-lg btn-danger" 
        data-toggle="popover" 
        data-content="And here's some amazing content. It's very engaging. right?"
    >Hover to toggle popover</a>

    <input type="submit" class="btn" id="userNameField" value="Sign in">
</div>

CSS

p {
    margin-top:10px;
    padding:50px;
    border: 1px solid lightgrey;
}
#myDiv {
    margin-top: 10px;
}

JavaScript

$('[data-toggle="tooltip"]').tooltip({
    'placement': 'top'
});
$('[data-toggle="popover"]').popover({
    trigger: 'hover',
        'placement': 'top'
});

$('#userNameField').tooltip({
    'show': true,
        'placement': 'bottom',
        'title': "Please remember to..."
});

$('#userNameField').tooltip('show');