JSFiddle - React, Tailwind, and code Playground

by nathan9

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Title</title>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    <div class="container" style="width: 320px">
        <p>How do I let my popover extend outside the div?</p>
        <a href="#toggle" data-toggle="collapse" data-target="#toggle" onClick="return false;">Toggle collapse</a>
        <div id="toggle" class="collapse" style="background-color: yellow">
            Content of collapsible div. Click for popover: 
            <i class="icon-info-sign" id="info"></i>
        </div>
        <div>
            This is below the collapsible div.
        </div>
    </div>
    <script src="//code.jquery.com/jquery-latest.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
    <script>
        $('#info').popover({ html: true, placement: 'left', title: 'Popover', content: "<ul><li>The</li><li>popover</li><li>is</li><li>clipped.</li></ul>" });
    </script>
    </body>
</html>