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

Journal Blogging

I’m going to stick with my goal of writing every day, however I’m going to switch gears a bit and give private blogging a try. In other words - I won’t be posting this blog any longer. I’ve liked the journal blog formatting, but I’ve... Continue →