Popover zeigt keine korrekte Ausrichtung Bootstrap

Ich arbeite an einem Projekt, wo ich einen Wert in einem Popover anzeigen möchte. Aber wie ich viele Dinge ausprobiert habe, wird es nicht richtig angezeigt. Schau dir meinen Code an. Ich wickle ein div in ein Tag ein, um ein Popover darauf zu machen. es funktioniert nicht richtig.Popover zeigt keine korrekte Ausrichtung Bootstrap

Wenn ich es in div verpacken, wird Popover nicht angezeigt. lassen Sie mich wissen, was in meinem Code falsch ist oder geben Sie mir einen Vorschlag.

https://codepen.io/awesome_designer/pen/EoazJv

<main class="set-callback-main-wrap"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="callback-table-main-wrap"> 
      <div class="call-back-time-header clearfix"> 
       <div class="call-back-time-value blank-slot"> 
       <span></span> 
       </div> 
       <div class="call-back-time-value first-slot"> 
       <span>12am</span> 
       </div> 



      </div> 
      <div class="clearfix table-date-value"> 
       <div class="call-back-date"> 
       <span>Dec 1</span> 
       </div> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner cyan"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <div class="call-set-slot-inner"></div> 
       <!-- </div> --> 
      </div> 


      </div> 

     </div> 
     </div> 
    </main>

Quelle

2017-12-14 Awesome Designer

Standardmäßig wird der popover auf der rechten Seite des Elements angezeigt.

justieren ein Attribut data-toggle="popover" zu jeden Block <div> (element)

<div class="call-set-slot-inner pink" data-toggle="popover" data-trigger="focus" data-container="body" data-placement="right" data-html="true" id="login"></div>

Mit data-trigger="focus"

Daten-trigger = Attribut "focus", die die popover schließt, wenn sie außerhalb der Einrastvorsprung Element:

Edi t Ihr Javascript

$("[data-toggle=popover]").click(function(){ 
    $(this).popover({ 
     html: true, 
     content: function() { 
     var id = $(this).attr('id'); 
     return $('#popover-content-' + id).html(); 
     } 
    }); 
});

Quelle

2017-12-14 07:59:27

Vielen Dank für Ihre Lösung, aber es sieht nicht wie ich will. Denn wenn ich data-toggle = "popover" setze data-trigger = "focus" data-container = "body" data-placement = "richtig" data-html = "true" id = "login" dann evry div habe ein Popover aber ich will ein popover zu allen div. –

Ich bin mir nicht sicher, wie ich das machen soll, da Bootstrap Popover die absolute Positionierung auf das Popover anwendet, um das Popover in die Nähe des auslösenden Elements zu bringen. –

Ich fand die Antwort.

Ich wickle Divs in einzelne div und geben Sie ein Popover zu diesem div und etwas Stil. Der Code ist unten angegeben.

<div data-toggle="popover" data-container="body" data-triger="focus" data-placement="top" data-html="true" id="login" style="width: 240px;height: 50px;float: left;"> 
        <div class="call-set-slot-inner pink"></div> 
        <div class="call-set-slot-inner pink"></div> 
        <div class="call-set-slot-inner pink"></div> 
        <div class="call-set-slot-inner pink"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
        <div class="call-set-slot-inner pink"></div> 
        <div class="call-set-slot-inner pink"></div> 
        <div class="call-set-slot-inner pink"></div> 
        <div class="call-set-slot-inner pink"></div> 
       <!-- </div> --> 
       <!-- <div class="call-set-slot"> --> 
        <div class="call-set-slot-inner pink"></div> 
        <div class="call-set-slot-inner pink"></div> 
        <div class="call-set-slot-inner pink"></div> 
        <div class="call-set-slot-inner pink"></div> 
        <div id="popover-content-login" class="hide"> 
        <ul class="list-group"> 
        <li class="list-group-item">Cras justo odio</li> 
        <li class="list-group-item">Dapibus ac facilisis in</li> 
        <li class="list-group-item">Morbi leo risus</li> 
        <li class="list-group-item">Porta ac consectetur ac</li> 
        <li class="list-group-item">Vestibulum at eros</li> 
        </ul> 
        </div> 
       </div>

Quelle

2017-12-14 09:24:23

Popover zeigt keine korrekte Ausrichtung Bootstrap

Antwort

Verwandte Themen