JSFiddle - React, Tailwind, and code Playground

by ptomblin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.css">
<div class="row-fluid">
    <div class="span3">
        <select name="abc" class="input-block-level">
            <option value="">Select</option>
            <option value="aaa" rel="popover" data-content="aaa content" data-placement="left">aaaa</option>
            <option value="bbb" rel="popover" data-content="bbb content" data-placement="left">bbbb</option>
            <option value="ccc" rel="popover" data-content="cccc content" data-placement="left">cc</option>
            <option value="ddd" rel="popover" data-content="ddd content" data-placement="left">cdd</option>
            <option value="eee" rel="popover" data-content="eee content" data-placement="left">eee</option>
        </select>
    </div>
</div>

JavaScript

$('select').selectBoxIt({
    theme: 'bootstrap',
    autoWidth: false
});
$('[rel="popover"]').popover({
    trigger: 'hover',
    container: 'body'
});