bootstrap popover fixing

Jquery 2.0.2 Bootstrap 3.x FontAwesome 3.2.1

by Plippie Plop

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.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">
<div id="zone">
<a href="#" 
    class="btn btn-primary popit"
    data-toggle="popover" 
    title="Testing" 
data-content="Good work, you've beaten the internet! Good work, you've beaten the internet! Good work, you've beaten the internet! Good work, you've beaten the internet! Good work, you've beaten the internet!"
>Pop me</a>
    
</div>

CSS

#zone{
    width:80%;
    margin:0 auto;
    margin-top:2em;
    padding:10px;
    background:#eee;
    text-align:center;
}

JavaScript

$('.popit').popover({ 
    position: 'right', 
    callback: function(popover){
        console.log($(this));
        popcall;
    }
}).data('popover');

// callback extender for popovers
var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
  tmp.call(this);
  if (this.options.callback) {
    this.options.callback();
  }
}

// repositioning
function popcall(){
   
var $tip =$(this);
var pos =el.offset();
var actualWidth  = $tip.offsetWidth;
var actualHeight = $tip.offsetHeight;

// Get positions
var tpt = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
var tpb = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
var tpr = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
var tpl = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}
  
// Get position room
var hast = (tpt.top > $(window).scrollTop())
var hasb = ((tpb.top + actualHeight) < ($(window).scrollTop() + $(window).height()))
var hasr = ((tpr.left + actualWidth) < ($(window).scrollLeft() + $(window).width()))
var hasl = (tpl.left > $(window).scrollLeft())

switch (placement) {
    case 'top':
        if (!hast) {
         placement = hasb ? 'bottom' : (hasr ? 'right' : (hasl ? 'left' : 'right'))
        }
        break;
    case 'bottom':
        if (!hasb) {
          placement = hast ? 'top' : (hasr ? 'right' : (hasl ? 'left' : 'right'))
         }
         break;
    case 'right':
         if (!hasr) {
           placement = hasl ? 'left' : (hast ? 'top' : (hasb ? 'bottom' : 'right'))
         }
         break;
    case 'left':
     if (!hasl) {
           placement = hasr ? 'right' : (hast ? 'top' : (hasb ? 'bottom' : 'right'))
        }
      break;
   }
    
}