CODEWITHSUNDEEP
csstwitter-bootstrappopover
TheOpti
TheOpti

Reputation: 1661

Bootstrap popover - move it to the left/right side

I want to relocate my bootstrap popover in the left side, i.e. I want to move the whole popover in the left side, while the white arrow would stay in one place.

I would like to have the effect which is on google.com website, when you click blue icon you see popover but its content is relocated while the white arrow is located under the user.

I know that I can use something like this:

.popover {
    top:0 !important;
    margin-top:10px;
}

Unfortunately, it relocates the whole popover altogether with white arrow.

What I have now (popover is on the right side and there's no place between screen edge and my popover)

enter image description here

What I want to have (small distance between popover and monitor's edge):

enter image description here

Upvotes: 4

Views: 10872

Answers (2)

davidkonrad
davidkonrad

Reputation: 85538

“I want to change the position of content of this popover so that this arrow will be placed further on the left„

When the popover is shown the arrow position is calculated in Tooltip.prototype.replaceArrow based on width/height and placement. You can force a specific position with this CSS :

.popover .arrow {
    left: 90px !important; /* or 45% etc */
}

But that will affect all popovers. Popovers is injected and removed to and from the DOM, and there is by default no way to target visible popovers individually. If you want to style the arrow on a specific popover, a workaround is to hook into the shown.bs.popover event, detect which popover that is being shown, and style 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;            
    }   
})

To get this to work, there must be only one popover shown at a time (see fiddle). It can be worked out with multiple visible popovers also, but then we need to add some HTML to the popover content.

see demo -> http://jsfiddle.net/uteatyyz/

Upvotes: 3

DevangKantharia
DevangKantharia

Reputation: 694

As what I have understood so far, you want to achieve the popover to the left of the button.

Please check this 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 have edited the answer as per the images that you have shown. If this is not is answer, then please comment below.

Regards D.

Upvotes: 1

Related Questions