Bootstrap 3.0 Popover Sample

by Edward Tanguay

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<button id="ok" type="button">
do it
</button>


<div id="pop1" class="popover" align="center">
	Your pop-over content will go in here!!!
	<a href="javascript:closePopOver('pop1');">CLOSE ME</a>
</div>

CSS

.popover {
	position: absolute;
	display: none;
	z-index: 2;
	height: 150px;
	width: 300px;
	background-color: #eaeaea;
}

JavaScript

$(function() {

	$('#ok').click(function() {
		let divID = 'pop1';
    document.getElementById(divID).style.left = "200px";
    document.getElementById(divID).style.top = "100px";

    // SHOW THE DIV
    document.getElementById(divID).style.display = "block";
  });

});


$(document).ready(function() {
  function showPopOver() {
    // SET THE DIV POSITION

  }

  // CLOSE POP-OVER
  function closePopOver(divID) {
    // HIDE THE DIV
    document.getElementById(divID).style.display = "none";
  }

});