wake-up-neo.net

bootstrap-Popover: erweiterte Positionierung

Ich versuche, einen Twitter-Bootstrap-Popover für einen Auslöser zu positionieren, der sich in der rechten oberen Ecke einer 960px-breiten Webseite befindet .. Idealerweise würde ich ihn unten positionieren und den Pfeil mit CSS verschieben ( der Pfeil befindet sich also oben rechts im Popover).

Leider reicht die Platzierung unten nicht aus, da sie unterhalb des Auslösers zentriert wird.

Ich suche nach einer Lösung, die den Popover statisch unterhalb und links vom Abzug platziert. Ich habe Tonnen von Fragen gelesen, aber keine gefunden.

Hinweise

50
koichirose

Das funktioniert. Geprüft.

.popover {
    top: 71px !important;
    left: 379px !important;
}
32
rboarman

Eine einfache Lösung

Füge deinem popover Buddy einfach ein Attribut hinzu!


Fiddle

Sehen Sie meine Geige wenn Sie es eilig haben


Hauptziel

Wir möchten einem bestimmten Popover eine ID oder eine Klasse hinzufügen, damit wir sie mithilfe von CSS nach Belieben anpassen können.

Bitte beachten Sie, dass wir nicht alle Popover anpassen möchten! Dies ist eine schreckliche Idee (im Grunde ist die akzeptierte Antwort heute eine schreckliche Idee ..)


Beispiel

Hier ein einfaches Beispiel - zeigen Sie den Popover folgendermaßen an:

 enter image description here

html:

<button id="my-button" data-toggle="popover">My Button</button>

js:

// We add the id 'my-popover'
$("#my-button").popover({
    html : true,
    placement: 'bottom'
}).data('bs.popover').tip().attr('id', 'my-popover');

css:

#my-popover {
    left: -169px!important;
}

#my-popover .arrow {
    left: 90%
}
17
Mick

Ich habe ein jQuery-Plugin erstellt, das 4 zusätzliche Platzierungen enthält: TopLeft, topRight, bottomLeft, bottomRight

Sie fügen entweder die minified js oder die unminified js ein und haben die übereinstimmende css (minified vs unminified) im selben Ordner.

https://github.com/dkleehammer/bootstrap-popover-extra-placements

13
dkleehammer

Popovers Ansichtsfenster

Die beste Lösung, die für Sie in allen Fällen geeignet ist, insbesondere wenn Ihre Website eine flüssige Breite hat, ist die Option viewport des Bootstrap Popover.

Dadurch wird die Popover-Breite in einem von Ihnen zugewiesenen Selector übernommen. Befindet sich die Auslöser-Schaltfläche rechts neben diesem Container, wird der Bootstrap-Pfeil auch rechts angezeigt, wenn sich der Popover innerhalb dieses Bereichs befindet .. _. Siehe jsfiddle.net .

Sie können auch padding verwenden, wenn Sie Platz am Rand des Containers haben möchten. Wenn Sie keine Auffüllung wünschen, verwenden Sie einfach viewport: '.container'

$('#popoverButton').popover({
   container: 'body',
   placement: "bottom",
   html: true,   
   viewport: { selector: '.container', padding: 5 },
   content: '<strong>Hello Wooooooooooooooooooooooorld</strong>'
 });

im folgenden HTML-Beispiel:

<div class="container">
   <button type="button" id="popoverButton">Click Me!</button>
</div>

und mit CSS:

.container {
  text-align:right;
  width: 100px;
  padding: 20px;
  background: blue;
}
9
Datsos

Ich löste dies (teilweise), indem ich der Bootstrap-CSS-Bibliothek einige Codezeilen hinzufügte. Sie müssen tooltip.js, tooltip.less, popover.js und popover.less ändern 

fügen Sie in tooltip.js diesen Fall in der switch-Anweisung dort ein

case 'bottom-right':
          tp = {top: pos.top + pos.height, left: pos.left + pos.width}
          break

fügen Sie in tooltip.less diese beiden Zeilen in .tooltip {} hinzu.

&.bottom-right { margin-top:   -2px; }
&.bottom-right .tooltip-arrow { #popoverArrow > .bottom(); }

machen Sie dasselbe in popover.js und popover.less. Wo immer Sie Code finden, an dem andere Positionen erwähnt werden, fügen Sie die gewünschte Position grundsätzlich hinzu.

Wie bereits erwähnt, wurde das Problem teilweise gelöst. Mein Problem ist jetzt, dass der kleine Pfeil des Popovers nicht angezeigt wird.

Hinweis: Wenn Sie den Popover oben links anzeigen möchten, verwenden Sie das obere Attribut '.top' und das linke Attribut '.left'.

7
khaled

So bootstrap 3.0.0:

.popover{ right:0!important; }

Und auch ändern 

.popover { max-width:WWWpx!important; } 

dabei ist WWW die richtige maximale Breite, um Ihren Popover-Inhalt anzuzeigen.

4
manufosela

Ich musste die folgenden Änderungen vornehmen, damit der Popover mit etwas Überlappung unten positioniert und der Pfeil richtig angezeigt wird. 

js  

case 'bottom-right':  
    tp = {top: pos.top + pos.height + 10, left: pos.left + pos.width - 40}  
    break  

css  

    .popover.bottom-right .arrow {  
      left: 20px; /* MODIFIED */  
      margin-left: -11px;  
      border-top-width: 0;  
      border-bottom-color: #999;  
      border-bottom-color: rgba(0, 0, 0, 0.25);  
      top: -11px;  
    }  
    .popover.bottom-right .arrow:after {  
      top: 1px;  
      margin-left: -10px;  
      border-top-width: 0;  
      border-bottom-color: #ffffff;  
    }  

Dies kann für Pfeilpositionen an anderer Stelle erweitert werden.

3
siruscoder

Sicher kannst du. Glücklicherweise gibt es einen sauberen Weg, und dies ist auch in der Bootstrap-Popover/Tooltip-Dokumentation enthalten.

let mySpecialTooltip = $('#mySpecialTooltip); 
mySpecialTooltip.tooltip({
 container: 'body',
 placement: 'bottom',
 html: true,
 template: '<div class="tooltip your-custom-class" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
}); 

in Ihrer CSS-Datei: -

.your-custom-class {
 bottom: your value;
}

Stellen Sie sicher, dass Sie die Vorlage in die Bootstrap-Tooltip-Dokumentation einfügen und Ihren benutzerdefinierten Klassennamen und -stil mit css hinzufügen

Und das ist es. Mehr dazu finden Sie unter https://getbootstrap.com/docs/4.0/components/tooltips/

1
Nandun Malinda

Möglicherweise benötigen Sie diese Logik nicht für ein ansprechendes Verhalten.

Z.B.

placement: 'auto left'

Bootstrap 3 hat den Wert auto für placement. Bootstrap doc :

Wenn "auto" angegeben ist, wird der Tooltip dynamisch neu ausgerichtet. Wenn die Platzierung beispielsweise "automatisch links" ist, wird der Tooltip nach links angezeigt, ansonsten rechts.

Wenn Sie sich die bootstrap-Quellcodes anschauen, werden Sie feststellen, dass die Position mit dem Rand geändert werden kann.

Zuerst sollten Sie die Popover-Vorlage ändern, um eine eigene CSS-Klasse hinzuzufügen, um nicht in Konflikt mit anderen Popovers zu geraten:

$(".trigger").popover({
  html: true,
  placement: 'bottom',
  trigger: 'click',
  template: '<div class="popover popover--topright" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});

Dann können Sie mit css die Popover-Position leicht verschieben:

.popover.popover--topright {
  /* margin-top: 0px; // Use to change vertical position */
  margin-right: 40px; /* Use to change horizontal position */
}
.popover.popover--topright .arrow {
  left: 88% !important; /* fix arrow position */
}

Diese Lösung würde andere Popovers, die Sie haben, nicht beeinflussen. Dieselbe Lösung kann auch für QuickInfos verwendet werden, da die Popover-Klasse von der Tooltip-Klasse erbt.

Hier ist ein einfaches jsFiddle

0
Buksy