Skip to content

Instantly share code, notes, and snippets.

@rakeshtembhurne
Created September 27, 2012 04:33
Show Gist options
  • Save rakeshtembhurne/3792172 to your computer and use it in GitHub Desktop.
Save rakeshtembhurne/3792172 to your computer and use it in GitHub Desktop.
JavaScript: Bootstrap Popover placement option to make auto change placement direction
var timeOutObj;
$(function(){
$(".card-btn").popover({
trigger: "manual",
html : true,
placement: function(tip, element) {
var $element, above, actualHeight, actualWidth, below, boundBottom, boundLeft, boundRight, boundTop, elementAbove, elementBelow, elementLeft, elementRight, isWithinBounds, left, pos, right;
isWithinBounds = function(elementPosition) {
return boundTop < elementPosition.top && boundLeft < elementPosition.left && boundRight > (elementPosition.left + actualWidth) && boundBottom > (elementPosition.top + actualHeight);
};
$element = $(element);
pos = $.extend({}, $element.offset(), {
width: element.offsetWidth,
height: element.offsetHeight
});
actualWidth = 410;
actualHeight = 200;
boundTop = $(document).scrollTop();
boundLeft = $(document).scrollLeft();
boundRight = boundLeft + $(document).width();
boundBottom = boundTop + $(document).height();
elementAbove = {
top: pos.top - actualHeight,
left: pos.left + pos.width / 2 - actualWidth / 2
};
elementBelow = {
top: pos.top + pos.height,
left: pos.left + pos.width / 2 - actualWidth / 2
};
elementLeft = {
top: pos.top + pos.height / 2 - actualHeight / 2,
left: pos.left - actualWidth
};
elementRight = {
top: pos.top + pos.height / 2 - actualHeight / 2,
left: pos.left + pos.width
};
elementBottomRight = {
top: pos.top + pos.height,
left: pos.left + pos.width / 2 - (actualWidth * 0.8)
};
elementBottomLeft = {
top: pos.top + pos.height,
left: pos.left + pos.width / 2 - (actualWidth * 0.2)
};
elementTopRight = {
top: pos.top - actualHeight,
left: pos.left + pos.width / 2 - (actualWidth * 0.8)
};
elementTopLeft = {
top: pos.top - actualHeight,
left: pos.left + pos.width / 2 - (actualWidth * 0.2)
};
above = isWithinBounds(elementAbove);
below = isWithinBounds(elementBelow);
left = isWithinBounds(elementLeft);
right = isWithinBounds(elementRight);
bottomRight = isWithinBounds(elementBottomRight);
bottomLeft = isWithinBounds(elementBottomLeft);
topRight = isWithinBounds(elementTopRight);
topLeft = isWithinBounds(elementTopLeft);
if (above) {
return "top";
} else if (topRight) {
return "top-right";
} else if (topLeft) {
return "top-left";
}
else if (below) {
return "bottom";
} else if (bottomRight) {
return "bottom-right";
} else if (bottomLeft) {
return "bottom-left";
}
else if(left) {
return "left";
} else if(right) {
return "right";
} else {
// default
return "bottom";
}
}
}).mouseenter(function(){
clearTimeout(timeOutObj);
$(".card-btn").not($(this)).popover("hide");
$(this).popover("show");
}).mouseleave(function() {
var ref = $(this);
timeOutObj = window.setTimeout(function(){
ref.popover("hide");
}, 1000);
});
$(".popover").live("mouseenter",function () {
clearTimeout(timeOutObj);
}).live("mouseleave", function(){
$(".card-btn").popover("hide");
});
});
@morgs32
Copy link

morgs32 commented Jan 27, 2014

Very interested. How do I use this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment