React in Bootstrap popover

by dj19910501

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<button 
    id="example"
    class="btn btn-lg btn-default"
    type="button"
    data-toggle="popover"
    data-placement="bottom"
	data-placement-bottom="20"
>
React Popover
</button>

CSS

button {
    margin: 2em;
}

h1 { text-align : center; }

JavaScript

var Tooltip = React.createClass({
    render : function() {
        return React.DOM.h1(null, this.props.displayName);
    }
});

var tooltip = React.renderComponentToString(Tooltip({ displayName: "Gargantua-1 Eats You" }));

$('#example').popover({
    html : true,
    content: tooltip
});