How to control exact position of Angular-UI Bootstrap popover
In my application, I have created a very simple Angular-UI popover. However, the standard options popover-placement
don't give me what I need. I want mine popover-placement
to bottom
be like my HTML comments below. However, the element this popover is attached to is on the left edge of the screen, so half of it comes off the screen. Is there a way to explicitly set it left: 0px
, for example, so that I can put this popover at the bottom, but avoid launching it from screen? My other option is to just use it popover-placement='right'
, but this is not ideal as it covers other content.
<img ng-src="/images/{{player.status}}.png" alt="" id="status" popover='{{player.detail}}' popover-title='Player Status: {{player.detailedStatus}}' popover-trigger='mouseenter' popover-placement='bottom'>
source to share
Try using attributes without the "popover" prefix. As I see in the source of the directive, no prefix is โโneeded
.directive( 'popoverPopup', function () {
return {
restrict: 'EA',
replace: true,
scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
templateUrl: 'template/popover/popover.html'
};
})
<img ng-src="/images/{{player.status}}.png" alt="" id="status" popover='{{player.detail}}' title='Player Status: {{player.detailedStatus}}' popover-trigger='mouseenter' placement='bottom'>
source to share