Bootstrap 3 Popover Arrow and Box Positioning

Bootstrap 3 Popover arrow and box positioning

You can customize the placement of the popover or it's arrow my manipulating the .popover CSS once the popover is shown.

For example, this pushes the top of the popover down 22 pixels..

$('[data-toggle=popover]').on('shown.bs.popover', function () {
  $('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px')
})

Working demo: http://bootply.com/88325

How to position a Bootstrap popover?

This works. Tested.

.popover {
    top: 71px !important;
    left: 379px !important;
}

How to control popover-arrow position in bootstrap 4

You can adjust the position of the arrow with the following styles:

Bootstrap 3

.popover.bottom > .arrow {
    margin-left: 50px;
}

Bootstrap 4

.popover.bs-tether-element-attached-top::after,
.popover.bs-tether-element-attached-top::before{
    left: 65%;
}

Replace the arrow with a Line in bootstrap popover

I have created the the left popover with line border. Hope You can create the right popover. Add bellow css code into your .css file

.container {
text-align: center;
margin: 20% auto;
width: 100%;
}
.popover.left{
 margin-left: -30px
}

.popover .arrow{
  border-width: 1px;
}
.popover.left .arrow:after {
right: -20px;
bottom: -12px;
}
.popover .arrow:after {
border-width: 0px;
content: "";
width: 30px;
height: 1px;
background-color: #ccc;
}

Bootstrap popover - move it to the left/right side

“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/

Customizing twitter bootstrap popover arrow

Twitter Bootstrap is based on Less.

If you want to change the appearance of its arrows use the bootstrap less variables to do so.

// Tooltips and popovers
// -------------------------
@tooltipColor:            #fff;
@tooltipBackground:       #000;
@tooltipArrowWidth:       5px;
@tooltipArrowColor:       @tooltipBackground;

@popoverBackground:       #fff;
@popoverArrowWidth:       10px;
@popoverArrowColor:       #fff;
@popoverTitleBackground:  darken(@popoverBackground, 3%);

// Special enhancement for popovers
@popoverArrowOuterWidth:  @popoverArrowWidth + 1;
@popoverArrowOuterColor:  rgba(0,0,0,.25);

If you are using Sass instead do the same with the Sass Variables.

Sadly the TB-Customizer doesn't have all the variables so you might have to compile it on your own.

Edit:

Good news the new Bootstrap 3 customizer now provides these options.

Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge?

I just noticed that the placement option could either be a string or a function returning a string that makes the calculation each time you click on a popover-able link.

This makes it real easy to replicate what you did without the initial $.each function:

var options = {
    placement: function (context, source) {
        var position = $(source).position();

        if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

        return "top";
    }
    , trigger: "click"
};
$(".infopoint").popover(options);

How can we change the color of arrow in the popover of bootstrap?

Use this css changing border-right color of pseudo element:

.popover.right .arrow:after {
  border-right-color: red;
}

#DEMO

---

Related Topics