Bootstrap: Jak zastąpić dynamiczne położenie popover?

Question

Zmieniłbym miejsce docelowe w rdzeniu programu startowego, ale chciałbym, aby moja aktualizacja bootstrap-sass była możliwa. Nie ma zmiennej dla offsetu popover i muszę tylko przesunąć 1 typ popover.

Górny przedstawia problem. Dno to moje dostosowanie za pomocą narzędzi do Chrome. Jeśli zatwierdzę tę zmianę w moim css, dynamiczne rozmieszczenie Bootstrapa zostanie ponownie dostosowane i wygląda to tak, jak poprzednio. Czy istnieje sposób, aby popover automatycznie pojawił się w granicach jego div rodzicielskich? Jeśli nie, w jaki sposób przezwyciężyć dynamiczne rozmieszczenie popover z marginesami ujemnymi?

AKTUALIZACJA: Dodanie kodu. Jest to wynikowy kod HTML dla grupy przycisków. Popover na pierwszym łączu działa, możesz go zignorować.

<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

Po przeczytaniu odpowiedzi Archonic na PR i FAT, zbadałem szablon, o którym mówił.

Jeśli skopiujesz szablon Bootstrapa i określisz go w swoich opcjach popover, możesz w tym miejscu wprowadzić klasy, co przynajmniej rozwiązało problem.

$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

Naprawiono go 2 liniami w bootstrap-tooltip.js i wykona żądanie ściągnięcia. To pomieści dodanie dowolnego stylu, który może naprawić problemy z miejscami docelowymi, które możesz mieć dzięki podpowiedziom lub popover.

W bootstrap-tooltip.js, tuż przed this.$element.trigger('shown') w show: function() dodać:

$tip.addClass(this.options.class) 

Następnie tuż przed this.$element.trigger('hidden') w hide: function(), dodać

$tip.removeClass(this.options.class) 

Wtedy kiedy inicjowania podpowiedź lub popover, dodać Twój styl:

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

Następnie oczywiście zadeklaruj .whatever-you-want w swoim css.

To powinno być o wiele łatwiejsze niż to -_-. Nie ma za co!