Bootstrap Popover Pfeil und Box Positionierung

Question

Ich benutze Bootstrap Popovers, um Informationen über einen Link bei Hover anzuzeigen, bevor Sie auf den Link klicken. Momentan funktioniert es jedoch. Die Links werden in einem Dropdown-Menü oben auf der Seite angezeigt. Wenn der erste Link viele Informationen darüber enthält, verschwindet der obere Teil des Popover am oberen Rand der Seite, sodass Sie den Inhalt nicht sehen können. Ich versuche es so zu machen, dass der Popover-Pfeil oben links im Popover erscheint (im Gegensatz zur Mitte-links, die er gerade macht) und der obere Teil der Popover-Box auf Höhe des Pfeils liegt, wenn das Sinn macht.

Das obige funktioniert gut, aber ich glaube nicht, dass Popover-Optionen mir hier helfen können. Es ist das CSS, das ich ändern muss, aber es ist ziemlich umfangreich, es zu posten, also suchte ich nur nach jemandem mit dem Wissen des Bootstraps, um mir in die richtige Richtung zu zeigen.
Danke.

Answer 1

Sie können die Platzierung des Popover anpassen oder es ist mein Pfeil manipuliert die .popover CSS, sobald das Popover angezeigt wird.

Zum Beispiel drückt dies die Spitze des popover um 22 Pixel ..

$('[data-toggle=popover]').on('shown.bs.popover', function() { 
    $('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px') 
}) 

Demo Arbeiten: http://bootply.com/88325

Answer 2

Es genaue Position Pfeil ur bieten wird

$(el).on('shown.bs.popover', function() { 
    var position = parseInt($('.popover').position().top); 
    var pos2 = parseInt($(el).position().top) - 5; 
    var x = pos2 - position + 5; 
    if (popoverheight < x) 
    x = popoverheight; 
    $('.popover.left .arrow').css('top', x + 'px'); 
    }); 

Answer 3

M y Anwendungsfall ist, dass die Popover-Platzierung top ist und ich den Pfeil entfernen muss.

Ich folgte der von @Skelly bereitgestellten Lösung, während ich Bootstrap 3.2.0 verwendete. Ein Problem ist, dass der Popover blinkt, wie die top css-Eigenschaft im shown.bs.popover aktualisiert wird.

In der Tat können Sie die template Eigenschaft beim Initialisieren des Popover überschreiben und fügen Sie einige margin-top (margin-left, wenn die Platzierung links/rechts ist) dazu.

$('[data-toggle=popover]').popover({ 
    placement: 'top', 
    template: '<div class="popover" role="tooltip" style="margin-top:10px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' 
}); 

Demo: http://www.bootply.com/gWwmO5XdbL

Answer 4

Ich empfehle die Platzierungsmethode anstatt das shown.bs.popover Ereignis verwenden. Dies wird keinen Popover-Sprung auslösen, wenn das Element angezeigt wird.

Dies ist, wie es funktioniert:

$('[data-toggle=popover]').popover({ 
    placement: function(context, source) { 
    var self = this; 
    setTimeout(function() { 
     self.$arrow.css('top', 55); 
     self.$tip.css('top', -45); 
    }, 0); 
    return 'right'; 
    }, 
}); 

Answer 5

ich Probleme mit dem popover oben so gehen aufwies, wurde ich es nicht sehen konnte. Dies reparierte es für mich

// Move things around if the popover is clipped on top. 
if (parseInt($('.popover').position().top) < 10) { 
    var arrow_position = parseInt($(this).position().top); 
    $('.popover').css('top', 10 + 'px'); 
    $('.popover .arrow').css('top', arrow_position + 'px'); 
}