JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<body>
    <a href="#"  rel="popover" data-content="test" data-original-title="hello" style="position: absolute; top: 300px; left: 300px;">This works</a>
<div id="cartridges">
    <div class="relative">
        <div id="listCartridges">
            <ul>
                <li>
                    <a href="#"  rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
                </li>
                <li>
                    <a href="#"  rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
                </li>
                <li>
                    <a href="#"  rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
                </li>
                <li>
                    <a href="#"  rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
                </li>
                <li>
                    <a href="#"  rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
                </li>
                <li>
                    <a href="#"  rel="popover" data-content="test" data-original-title="hello">This doesnt work</a>
                </li>
            </ul>
        </div>
    </div>
</div>
                </body>

CSS

@import url('http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css');

body {
    background: #666;
}

#cartridges {
    position: fixed;
    overflow: visible !important;
    bottom: 0;
    left: 0
    width: 100%;
    border-top: 1px solid #AAA;
}

#cartridges > .relative {
    width: 100%;
    height: 100%;
}

#listCartridges {
    width: 100%;
    background: #222;
}

#listCartridges > ul {
    display: inline-block;
    overflow-x: scroll;
    overflow-y: hidden;
    max-width: 100%;
    white-space: nowrap;
}

#listCartridges > ul > li {
    display: inline-block;
    margin: 3px;
    padding: 3px;
    position: relative;
    vertical-align:middle;
    border: 1px solid #474747;
    overflow: none;
}

JavaScript

$("[rel=popover]").popover({
    animation: true,
    trigger: 'click',
    offset: 10,
    placement: 'top',
    delay: {
        show: 500,
        hide: 100
    }
}).click(function(e) {
    e.preventDefault();
});