Bootstrap popover - move it left / right
I want to move my bootstrap popover to the left, meaning I want to move the entire popover to the left while the white arrow stays in one place.
I would like to have an effect that is on google.com, when you click the blue icon, you see the popover, but its content moves and the white arrow is below the user.
I know I can use something like this:
.popover {
top:0 !important;
margin-top:10px;
}
Unfortunately, it moves the entire popover along with the white arrow.
What I have (the popover is on the right and there is no space between the edge of the screen and my popover)
What I want to have (small distance between popover and monitor border):
source to share
"I want to reposition the content of this popover so that this arrow is placed further to the left."
When the popover is displayed, the position of the arrow is calculated in Tooltip.prototype.replaceArrow
based on the width / height and placement. You can force a specific position with this CSS:
.popover .arrow {
left: 90px !important; /* or 45% etc */
}
But it will affect all popovers. Popovers are injected and removed to and from the DOM, and there is no way to individually customize visible popovers by default. If you want to style the arrow on a specific popover, the workaround is to bind to the event shown.bs.popover
, define the popover to display, and erase the arrow for that popover if needed. Example:
.on('shown.bs.popover', function() {
var $popover = $('.popover')[0];
switch ($(this).attr('id')) {
case 'a' : $popover.find('.arrow').css('left', '10px');break;
case 'b' : $popover.find('.arrow').css('left', '40%');break;
case 'c' : $popover.find('.arrow').css('left', '180px');break;
default : break;
}
})
For this to work, only one popover needs to be displayed (see fiddle). It can also be designed with multiple popovers visible, but then we need to add HTML to the popover content.
see demo -> http://jsfiddle.net/uteatyyz/
source to share
As I've understood so far, you want to reach the popover to the left of the button.
Please check Plunker Link
HTML code:
<div class="pull-right">
<button type="button" mypopover data-placement="left" title="title">Click here</button>
</div>
Angular Code:
var options = {
content: popOverContent,
placement: "bottom",
html: true,
date: scope.date,
trigger: 'focus'
};
I edited the answer to match the images you showed. If this is not an answer, please comment below.
Refers to D.
source to share