How To Position A Bootstrap Popover

How to position a Bootstrap popover?

Tags: javascript , twitter-bootstrap , css , css-position , popover Answers: 1 | Viewed 140,107 times



I'm trying to position a Bootstrap popover for a trigger that sits on the far top-right corner of a 960px wide web page.


Ideally, I'd position it on the bottom and move the arrow with CSS (so the arrow is on the top-right of the popover). Unfortunately the 'placement':'bottom' positioning is not enough, since it will center it below the trigger.


I'm looking for solution that will place the popover statically below and on the left of the trigger.


Some Answers For How To Position A Bootstrap Popover

#1. How to position a Bootstrap popover?


.popover {
top: 71px !important;
left: 379px !important;
}
// We add the id 'my-popover'  $("#my-button").popover({
html : true,
placement: 'bottom' }).data('bs.popover').tip().attr('id', 'my-popover');
#my-popover {
left: -169px!important;
} #my-popover .arrow {
left: 90% }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button id="my-button" data-toggle="popover">My Button</button>

$('#popoverButton').popover({
container: 'body',
placement: "bottom",
html: true,
viewport: { selector: '.container', padding: 5 },
content: '<strong>Hello Wooooooooooooooooooooooorld</strong>' });

<div class="container">
<button type="button" id="popoverButton">Click Me!</button>
</div>

.container {
text-align:right;
width: 100px;
padding: 20px;
background: blue;
}

case 'bottom-right':

tp = {top: pos.top + pos.height, left: pos.left + pos.width}

break

&.bottom-right { margin-top:
-2px;
} &.bottom-right .tooltip-arrow { #popoverArrow >
.bottom();
}

.popover{ right:0!important;
}

.popover { max-width:WWWpx!important;
}

case 'bottom-right':
tp = {top: pos.top + pos.height + 10, left: pos.left + pos.width - 40}
break


.popover.bottom-right .arrow {
left: 20px;
/* MODIFIED */
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #999;
border-bottom-color: rgba(0, 0, 0, 0.25);
top: -11px;
}
.popover.bottom-right .arrow:after {
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: #ffffff;
}

$(".trigger").popover({
html: true,
placement: 'bottom',
trigger: 'click',
template: '<div class="popover popover--topright" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' });

.popover.popover--topright {
/* margin-top: 0px;
// Use to change vertical position */
margin-right: 40px;
/* Use to change horizontal position */ } .popover.popover--topright .arrow {
left: 88% !important;
/* fix arrow position */ }

let mySpecialTooltip = $('#mySpecialTooltip);
mySpecialTooltip.tooltip({ container: 'body', placement: 'bottom', html: true, template: '<div class="tooltip your-custom-class" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' });

.your-custom-class {  bottom: your value;
}

placement: 'auto left' 

Please leave your answer here: