JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<title>Bootstrap Example</title>

<!-- body content -->
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <button type="button" class="btn btn-info" data-toggle="popover" title="Popover title">Toggle popover</button>
    </div>
  </div>
</div>

<!-- loaded popover content -->
<ul id="popover-content" class="list-group" style="display: none">
  <a href="#" class="list-group-item">Edit Event</a>
  <a href="#" class="list-group-item">Invite Members</a>
  <a href="#" class="list-group-item">Delete Event</a>
</ul>

JavaScript

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