How to create popover include header dan footer in bootstrap

Assalamu'alaikum wr wb,
This time i will share little bit tutorial How to create popover include header dan footer in bootstrap.
The syntax below.
----------------------------------------------------
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">


.popover-footer {
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  background-color: #F7F7F7;
  border-bottom: 1px solid #EBEBEB;
  border-radius: 5px 5px 0 0;
}
</style>

<a href="#" rel="details" class="btn btn-small pull-left" data-toggle="popover" title="my popover" data-content="">click me to see popover</a>


<script type="text/javascript">
$("[rel=details]").popover({
    trigger : 'click',
    placement : 'bottom',
    html: 'true',
    content : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
   template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div><div class="popover-footer">Footer Popover</div></div>'
});
</script>
----------------------------------------------------
May be useful.
http://pangeran-it.blogspot.co.id/