JSFiddle - React, Tailwind, and code Playground

by Kiwiupover

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="container">
    <div class="well">
        <div id="example" class="btn btn-danger" rel="popover" data-restaurant-id="4466">Wayward Coffeehouse</div>
    </div>
</div>
<div class="container">
    <div class="well">
        <div id="example1" class="btn btn-danger" rel="popover" data-restaurant-id="353141">The Gypsy Cafe &amp; Pub</div>
    </div>
</div>
<div class="list numbered">
    <ul id="collection_131177980_collection">
        <li class="row-fluid restaurant" data-restaurant-id="4466">
            <div class="number">1</div>
            <div class="details">
                <div class="title">
<a href="/r/1/4466/restaurant/Ravenna/Wayward-Coffeehouse-Seattle" title="Wayward Coffeehouse">Wayward Coffeehouse</a>

<span class="rating-percent">80%</span>

                    <!-- / Current vote and vote actions -->
                    <div class="pull-right">
                        <div class="inline_vote vote_restaurant_4466">
                            <div class="dropdown">
<a href="#" class="current" data-current-vote="1" data-toggle="dropdown"><i class="icon-like active"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="description">
<span class="price">$</span>

<span class="neighborhood">
Ravenna
</span>
-
<span class="cuisines">
Coffee, Bagels
</span>

<span class="address">
6417 Roosevelt Way NE
</span>

                </div>
            </div>
        </li>
        <li class="row-fluid restaurant" data-restaurant-id="353141">
            <div class="number">2</div>
            <div class="details">
                <div class="title">
<a href="/r/1/353141/restaurant/Wallingford/The-Gypsy-Cafe-Pub-Seattle" title="The Gypsy Cafe &amp; Pub">The Gypsy Cafe &amp;...

CSS

.well {
    padding-left:100px;
}
.box {
    width:200px;
    height:100px;
    color:black;
}
#example {
    position:relative;
}

JavaScript

(function ($) {
    var oldHide = $.fn.popover.Constructor.prototype.hide;

    $.fn.popover.Constructor.prototype.hide = function () {
        if (this.options.trigger === "hover" && this.tip().is(":hover")) {
            var that = this;
            // try again after what would have been the delay
            setTimeout(function () {
                return that.hide.call(that, arguments);
            }, that.options.delay.hide);
            return;
        }
        oldHide.call(this, arguments);
    };
})(jQuery);

$(document).ready(function () {
    $('.btn').popover({
        html: true,
        trigger: 'hover',
        container: $(this).attr('id'),
        placement: 'bottom',
        content: function () {
              var $this = $(this),
                restaurantId = $this.data('restaurant-id'),
                $listRestaurant = $('.list').find($('*[data-restaurant-id="'+ restaurantId +'"]')),
                $title = $listRestaurant.find('.details .title a'),
                $rating = $listRestaurant.find('.details .rating-percent').html(),
                $neighborhood = $listRestaurant.find('.details .neighborhood').html();
                html = '<div class="box">' +
                           $title.get( 0 ) +
                           $rating +
                           $neighborhood +
                       '</div>';
            return html;
        },
        animation: false,
        delay: {
            hide: 300
        }
    }).on({
        show: function () {
            console.log("shown");
        },
        hide: function () {
            console.log("hidden");
        }
    });
});