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>
 
146
Kudos
 
146
Kudos

Now read this

Why Blog?

If I’m not hanging out with family, I’m probably in front of my computer building something. Family and business are the two loves of my life. And I feel extremely fortunate that my business (ie Purlem and Tend), allow for this balance.... Continue →