I'm looking to customize the position of a Bootstrap popover that appears outside of a panel. Here's my setup:
HTML:
<div class="panel">
<div class="panel-body">
<input type="text" id="text_input" data-toggle="popover"
data-content="blah" data-trigger="focus" data-placement="left"/>
</div>
</div>
Javascript:
$(document).ready(function(){
$("[data-toggle='popover']").popover();
/*
$("#text_input").on("shown.bs.popover", function(){
$(".popover").css("left",
parseInt($(".popover").css("left")) - 20 + "px");
});
*/
});
CSS:
.panel {
width:50%;
margin-left: auto;
margin-right: auto;
}
Fiddle link: https://jsfiddle.net/DTcHh/10430/ (uncomment js to see desired result)
I've attempted to move the popover element left using the tips provided here, but it causes an unwanted jump in position when shown.
I aim to achieve a similar effect seen on Stackoverflow, where tooltips are displayed away from the target element:
https://i.sstatic.net/Hv9fo.png
If you have any suggestions on how to shift the position of the popover without causing a sudden jump, I'd greatly appreciate it. Thank you.