Я использую угловой загрузчик для всплывающей подсказки. У меня проблема с выравниванием.
По умолчанию я установил положение как "вправо". Так что все в порядке. Но когда я нажимаю на последний контент, я сталкиваюсь с проблемой. Это не совсем для моего случая. Он прячется наполовину.
Пожалуйста, посмотрите на этот пример,
Plunkr
Не только самый последний контент. Если у меня будет больше контента в той же строке, прокрутка придет в то время, когда элемент, который достигнет последнего по ширине экрана, в это время также скрывается всплывающее окно.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function($scope, $sce) {
$scope.dynamicPopover = {
content: 'Hello, World!',
templateUrl: 'myPopoverTemplate.html',
title: 'Title'
};
$scope.placement = {
options: [
'top',
'top-left',
'top-right',
'bottom',
'bottom-left',
'bottom-right',
'left',
'left-top',
'left-bottom',
'right',
'right-top',
'right-bottom'
],
selected: 'top'
};
$scope.htmlPopover = $sce.trustAsHtml('<b style="color: red">I can</b> have <div class="label label-success">HTML</div> content');
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<h4>Triggers</h4>
<p>
<button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" popover-placement="right" type="button" class="btn btn-default">Mouseenter</button>
<button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" popover-placement="right" type="button" class="btn btn-default">Mouseenter</button>
<button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" popover-placement="right" type="button" class="btn btn-default">Mouseenter</button>
<button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" popover-placement="right" type="button" class="btn btn-default">Mouseenter</button>
<button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" popover-placement="right left" type="button" class="btn btn-default">Mouseenter</button>
<button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" popover-placement="right" type="button" class="btn btn-default">Mouseenter</button>
<button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" popover-placement="left right" type="button" class="btn btn-default">Mouseenter</button>
<button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" popover-placement="right" type="button" class="btn btn-default">Mouseenter</button>
</p>
</div>
</body>
</html>