JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<input type="text" id="cboStores" placeholder="Select Store" value="My Foot" style="width:150px;height:30px;" />

<div id="popoverContent" class="hidden">
    <ul class="popup-cbo-menu">
        <li><a href="#" onclick="setStore($(this), -1, 'All Stores')">All Stores</a></li>
        <li class="selected"><a href="#" onclick="setStore($(this), 1, 'My Foot')">My Foot</a></li>
        <li><a href="#" onclick="setStore($(this), 2, 'My Foot 1')">My Foot 1</a></li>
    </ul>
</div>

CSS

.cont-popup-cbo-menu .popover-content {
    padding-left: 0;
    padding-right: 0;
}

ul.popup-cbo-menu {
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-align: left;
    background-color: #fbfbfb;
    min-width: 180px;
}

    ul.popup-cbo-menu li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        ul.popup-cbo-menu li:hover {
            background-color: #f2f2f2;
            color: blue;
        }

        ul.popup-cbo-menu li a {
            background: none;
            color: #363636;
            text-decoration: none;
            margin: 0;
            padding: 5px 10px 5px 10px;
            -o-text-overflow: ellipsis; /* Opera */
            text-overflow: ellipsis; /* IE, Safari (WebKit) */
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
            display: block;
        }

        ul.popup-cbo-menu li.selected a {
            color: #363636;
            background-color: #f2f2f2;
            font-weight: bold;
        }

        ul.popup-cbo-menu li a:hover {
            color: blue;
            text-decoration: none;
        }

        ul.popup-cbo-menu li span {
            background-color: #f2f2f2;
            color: #363636;
            text-decoration: none;
            font-weight: bold;
            margin: 0;
            padding: 5px 10px 5px 10px;
            -o-text-overflow: ellipsis; /* Opera */
            text-overflow: ellipsis; /* IE, Safari (WebKit) */
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
            display: block;
        }

JavaScript

function setStore($s, id, name) { 																
    $('#popoverContent').find('li.selected').removeClass('selected');
   $('#popoverContent').find('a').filter(function(){
   		return $(this).text() === $s[0].innerHTML;
   }).parent().addClass('selected');
  	$('#cboStores').val(name);
    $("#cboStores").data('bs.popover').options.content = $('#popoverContent').html();
}

$("#cboStores").popover({
    viewport: 'body',
    trigger: 'click',
    placement: 'bottom',
    html: true,
    content: $('#popoverContent').html(),
    template: '<div class="popover cont-popup-cbo-menu" role="tooltip">' +
    '   <div class="arrow"></div><h3 class="popover-title"></h3>' +
    '   <div class="popover-content"></div>' +
    '</div>'
}).blur(function () {
    $(this).popover('hide');
});