StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>For those interested in a solution that will take a default placement (using the <code>data-placement</code> attribute on the element), I have adapted the great answer from Cymen.</p> <p>I've also ensured that no boundaries are calculated unnecessarily, so it should be slightly more performant.</p> <pre><code>$('[data-toggle="popover"]').each(function() { var trigger = $(this); trigger.popover({ animation: true, delay: { show: 0, hide: 0 }, html: true, trigger: 'hover focus', placement: getPlacementFunction(trigger.attr("data-placement"), 283, 117) }); }); var getPlacementFunction = function (defaultPosition, width, height) { return function (tip, element) { var position, top, bottom, left, right; var $element = $(element); var boundTop = $(document).scrollTop(); var boundLeft = $(document).scrollLeft(); var boundRight = boundLeft + $(window).width(); var boundBottom = boundTop + $(window).height(); var pos = $.extend({}, $element.offset(), { width: element.offsetWidth, height: element.offsetHeight }); var isWithinBounds = function (elPos) { return boundTop < elPos.top && boundLeft < elPos.left && boundRight > (elPos.left + width) && boundBottom > (elPos.top + height); }; var testTop = function () { if (top === false) return false; top = isWithinBounds({ top: pos.top - height, left: pos.left + pos.width / 2 - width / 2 }); return top ? "top" : false; }; var testBottom = function () { if (bottom === false) return false; bottom = isWithinBounds({ top: pos.top + pos.height, left: pos.left + pos.width / 2 - width / 2 }); return bottom ? "bottom" : false; }; var testLeft = function () { if (left === false) return false; left = isWithinBounds({ top: pos.top + pos.height / 2 - height / 2, left: pos.left - width }); return left ? "left" : false; }; var testRight = function () { if (right === false) return false; right = isWithinBounds({ top: pos.top + pos.height / 2 - height / 2, left: pos.left + pos.width }); return right ? "right" : false; }; switch (defaultPosition) { case "top": if (position = testTop()) return position; case "bottom": if (position = testBottom()) return position; case "left": if (position = testLeft()) return position; case "right": if (position = testRight()) return position; default: if (position = testTop()) return position; if (position = testBottom()) return position; if (position = testLeft()) return position; if (position = testRight()) return position; return defaultPosition; } } }; </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload