JSFiddle - React, Tailwind, and code Playground

by almeidap

HTML

<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<h3>Using <em>data-content</em> attribute as text:</h3>
<a data-toggle="popover" data-title="Popover Title" data-content="Text from data-content attribute!" class="btn btn-primary btn-large" href="#" data-original-title="A Title">Click to toggle popover</a>

<hr />

<h3>Using <em>data-content</em> attribute as CSS selector:</h3>
<a data-toggle="popover" data-title="Popover Title" data-content-target="#countdown-popup" class="btn btn-success btn-large" href="#" data-original-title="A Title">Click to toggle popover</a>
<div id="countdown-popup" class="hide">Text from <code>#countdown-popup</code> element!</div>

JavaScript

$('[data-toggle="popover"]').popover({
	html: true,
	content: function() {
        var content = $(this).data('content-target');
        try { content = $(content).html() } catch(e) {/* Ignore */}
        return content || $(this).data('content');
	}
});