Custom Data Placement for Bootstrap Popovers

I recently needed to define a unique position for only certain bootstrap popovers.

If you don’t have multiple popovers on the same page, this is easy accomplished through CSS:

.popover.bottom {
  margin-top: 30px;
}
.popover {
  left: 100px !important;
}

However, this will effect all popovers on the page. I needed this to only be applied to popovers that resided in our sidebar. To pull this off, the trick was to update the popover’s template.

By default, Bootstrap defines the popover template as so:

<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>

Here we can add a unique css class to the popover:

<div class="popover popover-sidebar" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>

And place this new template into the popover’s “template” data attribute when enabling:

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

Update your popover links to reference the new popover js:

<a data-container="body" data-toggle="popover" data-placement="bottom" class="sidebar_popover_link">

Finally, update the CSS to only be applied to these popovers:

.popover-sidebar.bottom {
  margin-top: 30px;
}
.popover-sidebar {
  left: 100px !important;
}</a>