I have a list of items, and each one has a Bootstrap popover associated with it ( docs here ). They are initiated like this:
$('#my_list li').popover({
placement: 'left'
});
This works, but at small widths the popover is lost from the viewport. I'd like to make the placement conditional based on $(document).width();
, however I can't see a way to over-ride the initial options (eg at at width of around 1000px, switch the placement to 'above').
I've put together a simplified version at jsfiddle here . Many thanks.
placement can also take a function as its value. In this function you can return the appropriate value based on width of viewport. For eg.
$(document).ready(function(){
$('#my_list li').popover({
placement: wheretoplace
});
});
function wheretoplace(){
var width = window.innerWidth;
if (width<500) return 'bottom';
return 'left';
}
它在窗口上从左到右的位置变化小于768
placement: function(){return $(window).width()>768 ? "auto left":"auto top";}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.