Menu
I'm using the Ui-bootstrap popover from UI Bootstrap (AngularJS).
and the popover in the border of the page seems to get out of the screen...
Is there a better way to position the popover - so it could stay inside the screen?
as you can see popover is cut...
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
$scope.dynamicPopover = {
content: 'Hello, World!',
templateUrl: 'myPopoverTemplate.html',
title: 'Title'
};
});<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<h4>Dynamic</h4>
<div class="form-group">
<label>Popup Text:</label>
<input type="text" ng-model="dynamicPopover.content" class="form-control">
</div>
<div class="form-group">
<label>Popup Title:</label>
<input type="text" ng-model="dynamicPopover.title" class="form-control">
</div>
<div class="form-group">
<label>Popup Template:</label>
<input type="text" ng-model="dynamicPopover.templateUrl" class="form-control">
</div>
<button uib-popover="{{dynamicPopover.content}}" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Dynamic Popover</button>
<button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>{{dynamicPopover.content}}</div>
<div class="form-group">
<label>Popup Title:</label>
<input type="text" ng-model="dynamicPopover.title" class="form-control">
</div>
</script>
<hr />
<h4>Positional</h4>
<button popover-placement="top" uib-popover="On the Top!" type="button" class="btn btn-default">Top</button>
<button popover-placement="left" uib-popover="On the Left!" type="button" class="btn btn-default">Left</button>
<button popover-placement="right" uib-popover="On the Right!" type="button" class="btn btn-default">Right</button>
<button popover-placement="bottom" uib-popover="On the Bottom!" type="button" class="btn btn-default">Bottom</button>
<hr />
<h4>Triggers</h4>
<p>
<button uib-popover="I appeared on mouse enter!" popover-trigger="mouseenter" type="button" class="btn btn-default">Mouseenter</button>
</p>
<input type="text" value="Click me!" uib-popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="focus" class="form-control">
<hr />
<h4>Other</h4>
<button popover-animation="true" uib-popover="I fade in and out!" type="button" class="btn btn-default">fading</button>
<button uib-popover="I have a title!" popover-title="The title." type="button" class="btn btn-default">title</button>
</div>
</body>
</html>http://plnkr.co/edit/QQxfc4BlHceJwt8zulKu?p=preview
707
As others have said in the comments, UI Bootstrap doesn't support auto-positioning popovers, and it seems unlikely that they will in the future.
That said, you could do any of the following to help:
Make sure you're using containers, rows, and columns... this will give you the "correct" padding in Boostrap, which will help make sure (though not guarantee) that popovers don't go off screen.
If your element is positioned on the left, always put the tooltip to the right. Again, this should help, but no guarantees.
Use a fork of UI Bootstrap that supports Bootstrap 4, which has much better auto-positioning for popovers (among other improvements). Here's one option that seems decently maintained.
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
