JSFiddle - React, Tailwind, and code Playground

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: wheretoplace().placement,
              trigger: "manual"                  
        });
    
    $("#my_list li").click(function(){
         $(this).popover("toggle");            
    });
        
});

function wheretoplace(){
    var data = {},    
        width = window.innerWidth;
    
    if (width<500) { data.placement = 'below'; data.trigger = 'hover'; }
    else { data.placement = 'left'; data.trigger = 'hover'; }

    return data;
}