JSFiddle - React, Tailwind, and code Playground

by Menuka Ishan

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div id="myPopoverContent">
   <table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>
</div>
<a ng-href="" data-toggle="popover" data-placement="bottom" id="test"><span class="badge"></span>Click Here</a>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

#myPopoverContent {display: none; float: right;}
.popover{
    width:700px;   
}

#test {margin-left: 250px;}

JavaScript

$('[data-toggle=popover]').popover({
		html: true,
    content: $('#myPopoverContent').html()
    
}).click(function() {
    $(this).popover('show');
});