JSFiddle - React, Tailwind, and code Playground

by cherryflavourpez

HTML

<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-twipsy.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-popover.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<div id="wrapper">
<p>Intro text</p>
<ul id="my_list" class="inputs-list">
    <li title="Popover 1" data-content="Lorem ipsum.">
      <label>
        <input type="checkbox" name="optionsCheckboxes" value="option1" />
        <span>Option 1</span>
      </label>
    </li>
     <li title="Popover 2" data-content="Dolor sit amet">
      <label>
        <input type="checkbox" name="optionsCheckboxes" value="option2" />
        <span>Option 2</span>
      </label>
    </li>
</ul>
</div>

CSS

#wrapper { margin: 20px auto; padding: 10px; width: 200px; background: #eee; }

JavaScript

$(document).ready(function(){
        $('#my_list li').popover({
            placement: 'left'
        });
    });