Bootstrap: How to override dynamic position of popover?

Question

I would adjust the placement in the bootstrap core but I'd like to keep my bootstrap-sass gem update-able. There isn't a variable for popover offset and I only need to offset 1 type of popover.

The top depicts the issue. The bottom is my adjustment using chrome dev tools. If I commit this change to my css, Bootstrap's dynamic placement readjusts and it looks like the above case again. Is there a way to have the popover automatically appear within the limits of it's parent div? If not, how do I overcome the dynamic popover placement with negative margins?

UPDATE: Adding the code. This the resulting HTML for the button group. The popover on the first link works, you can ignore it.

<div class="btn-group btn-section pull-right">
  <a href="/sections/edit_section_text/118" class="noprint btn active-workers hidden-phone bs-popover btn-primary" data-content="<ul id="sectionworkers" class="unstyled"><li><img alt="Avatar" class="avatar" height="25" src="https://secure.gravatar.com/avatar.php?d=mm&gravatar_id=9ac2c7fd1c8e43cd5b4d73d3cb585973" width="25" /> <small>Ben</small></li></ul> <!-- #sectionworkers -->" data-placement="bottom" data-target="#s118section" id="edit_btn118" rel="popover" data-original-title="Active Users: ">
    <i class="icon-edit icon-white"></i> Edit
  </a><option>View revision...</option>

  <a href="#" class="noprint btn bs-popover" data-content="<select></select>" data-placement="bottom" data-toggle="popover" id="hist_btn" rel="popover" data-original-title="View and difference revisions"><i class="icon-time"></i> History</a>

  <div class="popover popover-offset fade bottom in" style="top: 30px; left: 155.5px; display: block;">
    <div class="arrow"></div>
    <div class="popover-inner">
      <h3 class="popover-title">
        View and difference revisions
      </h3>
      <div class="popover-content">
        <select></select>
      </div>
    </div>
  </div>
</div>

Answer 1

After reading Archonic's PR and FATs response, I investigated the template he spoke of.

If you copy Bootstrap's template and specify it in your popover options you can inject classes at that point, which at least solved the problem for me.

$el.popover(
  placement: 'top',
  trigger: 'manual', 
  html: true, 
  content: @popoverContent, 
  container: '#mycontainer',
  template: '<div class="popover my_ace_class_name"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
)

Answer 2

Fixed it with 2 lines in bootstrap-tooltip.js and will make a pull request. This accommodates the addition of any style you want which can fix any placement issues you may have with tooltips or popovers.

In bootstrap-tooltip.js, just before this.$element.trigger('shown') in show: function (), add:

$tip.addClass(this.options.class)

Then just before this.$element.trigger('hidden') in hide: function (), add

$tip.removeClass(this.options.class)

Then when initializing the tooltip or popover, add your style like so:

$('.bs-popover').popover({html:true, trigger:'click', class:'whatever-you-want'})

Then of course declare .whatever-you-want in your css.

It should have been so much easier than this -_-. You're welcome!