JSFiddle - React, Tailwind, and code Playground

by ilyasnone

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12" style="margin-top: 50px;">
            <a href="#" data-placement="right" id="showproduct">Popover Example 2</a>
            <div id="product-item" style="display: none">
                <div><b>Popover Example</b> 2 - Content</div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    padding: 20px;
}

JavaScript

$(function () {
    $("[data-toggle=popover]").popover();
    $("#showproduct").popover({
        html: true,
        trigger: "hover",
        content: function () {
            return $('#product-item').html();
        }
    });
});