JSFiddle - React, Tailwind, and code Playground

by 亮 薛

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" id="test"><span class="badge"></span>Click Herex</a>

CSS

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

#myPopoverContent {
  display: none;
  float: right;
}

.popover {
  width: 700px;
}

#test {
  margin-left: 250px;
}

JavaScript

var text = "";
text += "<table border=\"1\" style=\"width:100%\">";
text += "  <tr>";
text += "    <td>Jill</td>";
text += "    <td>Smith</td>		";
text += "    <td>50</td>";
text += "  </tr>";
text += "  <tr>";
text += "    <td>Eve</td>";
text += "    <td>Jackson</td>		";
text += "    <td>94</td>";
text += "  </tr>";
text += "  <tr>";
text += "    <td>John</td>";
text += "    <td>Doe</td>		";
text += "    <td>80</td>";
text += "  </tr>";
text += "</table>";


$('[data-toggle=popover]').popover({
    content: text,
    html: true
});