Bootstrap 3.0 Popover Sample

by Nikita Polevoy

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<a href="#" id="example" class="btn btn-primary" rel="popover" data-content="This is the body of Popover" data-original-title="Creativity Tuts">pop
</a>

CSS

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#example {
  position: fixed;
}

JavaScript

var $el = $('#example'),
    $window = $( window ),
    delay = 500;

$(function() {  
  $el.popover({
    placement: 'auto'
  });
	animateDiv();
});

function animateDiv(){
    $el.animate({ top: Math.floor(Math.random() * ($window.height() - $el.height())), left: Math.floor(Math.random() * ($window.width() - $el.width())) }, function(){
      setTimeout(function() {
      	$el.click();
        setTimeout(function() {
        	$el.click();
          setTimeout(animateDiv, delay);
        }, delay);
      }, delay);
    });
};