JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
    <select id='list'>
        <option value='1'>First</option>
        <option value='2'>Second</option>
        <option value='3'>Third</option>
    </select>
    


<span id="result" />

CSS

body{
    margin:30px;
}
.settings{
    display:block;
    height:50px;
    width:50px;
    margin:10px;
    cursor:pointer;
}

JavaScript

var $popoversettings = $('.settings').popover({
    html: true,
    placement: 'right',
    content: function () {
        var mySettings = $(this).data('mysettings');
        return $(mySettings).html();
    }
});


$(':not(#anything)').on('click', function (e) {
    $popoversettings.each(function () {
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
            return;
        }
    });
});


$('#list').on('change', function () {
    $('#result').text($('#list option:selected').val());
}).change();