Here's what I'm trying to do. I want the Twitter Bootstap Popover position to be RIGHT unless the hotspot popover will be positioned beyond the viewport, then I want it to be positioned LEFT. I'm making an iPad web app that has hot spots, when you push on a hotspot, information appears but I don't want it to appear outside of the viewport when horizontal scrolling is locked.
I just noticed that the placement option could either be a string or a function returning a string that makes the calculation each time you click on a popover-able link.
This makes it real easy to replicate what you did without the initial $.each function:
var options ={ placement:function(context, source){var position = $(source).position();if(position.left >515){return"left";}if(position.left
回答2:
Based on the documentation you should be able to use auto in combination with the preferred placement e.g. auto left
http://getbootstrap.com/javascript/#popovers: "When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right."
I was trying to do the same thing and then realised that this functionality already existed.
回答3:
For Bootstrap 3, there is
placement:'auto right'
which is easier. By default, it will be right, but if the element is located in the right side of the screen, the popover will be left. So it should be:
So I figured out a way to do this effectively. For my particular project I'm building an iPad website so I knew exactly what the pixel X/Y value would be to reach the edge of the screen. Your thisX and thisY values will vary.
Since the popovers are being placed by inline styling anyway, I simply grab the left and top values for each link to decide which direction the popover should be. This is done by appending html5 data- values that .popover() uses upon execution.
Any comments/improvements are welcome but this gets the job done if you're willing to put the values in manually.
回答5:
bchhun's answer got me on the right track, but I wanted to check for actual space available between the source and the viewport edge. I also wanted to respect the data-placement attribute as a preference with appropriate fallbacks if there wasn't enough space. That way "right" would always go right unless there wasn't enough space for the popover to show on the right side, for example. This was the way I handled it. It works for me, but it feels a bit cumbersome. If anyone has any ideas for a cleaner, more concise solution, I'd be interested to see it.
==> Get target/source position in viewport ==> Check whether space from bottom is less that your tooltip height ==> If space from bottom is less that your tooltip height, then just scroll page up
placement:function(context, source){//get target/source position in viewportvar bounds = $(source)[0].getBoundingClientRect(); winHeight = $(window).height();//check wheather space from bottom is less that your tooltip heightvar rBottom = winHeight - bounds.bottom;//Consider 180 == your Tooltip height//if space from bottom is less that your tooltip height, this will scrolls page up//We are keeping tooltip position is fixed(at bottom)if(rBottom
回答7:
You can use auto in data placement like data-placement="auto left". It will automatic adjust according to your screen size and default placement will be left.
回答8:
In addition to bchhun's great answer, if you want absoulte positioning, you can do this
var options ={ placement:function(context, source){ setTimeout(function(){ $(context).css('top',(source.getBoundingClientRect().top+500)+'px')},0)return"top";}, trigger:"click"}; $(".infopoint").popover(options);
回答9:
I solved my problem in AngularJS as follows:
var configPopOver ={ animation:500, container:'body', placement:function(context, source){var elBounding = source.getBoundingClientRect();var pageWidth = angular.element('body')[0].clientWidth var pageHeith = angular.element('body')[0].clientHeith if(elBounding.left >(pageWidth*0.34)&& elBounding.width
This function do the position of Bootstrap popover float to the best position, based on element position.
回答10:
You can also try this one if u need it in almost all places in the page.
U can configure it in a general way then just use it.
In this way u can also use HTML element and anything u want :)
$(document).ready(function(){var options ={ placement:function(context, source){var position = $(source).position();var content_width =515;//Can be found from a JS function for more dynamic outputvar content_height =110;//Can be found from a JS function for more dynamic outputif(position.left > content_width){return"left";}if(position.left
翻译