Update popover position

Other solutions can be found here http://stackoverflow.com/questions/10797912/bootstrap-popover-advanced-positioning

by buksy

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="trigger" data-toggle="popover" title="Popover title" data-content="Lorem ipsum dolor sit amet and thats all I remember">P</div>

CSS

.trigger {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50px;
  height: 50px;
  background-color: #AAE;
  color: #FFF;
  font-size: 36px;
  text-align: center;
  padding-top: 5px;
  box-sizing: border-box;
  cursor: pointer;
}

.popover.popover--topright {
  /* margin-top: 0px; // Use to change vertical position */
  margin-right: 30px; /* Use to change horizontal position */
}
.popover.popover--topright .arrow {
  left: 88% !important;
}

JavaScript

// more info here 
// http://stackoverflow.com/a/37066378/619616

$(".trigger").popover({
	html: true,
  placement: 'bottom',
  trigger: 'click',
  template: '<div class="popover popover--topright" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});