Popover가 적절한 정렬을 표시하지 않습니다. 부트 스트랩

Question

나는 popover에 일부 값을 표시하려는 한 프로젝트에서 작업하고 있습니다. 그러나 나는 많은 것을 시도해 보았으므로 올바르게 표시되지 않습니다. 내 코드 좀 봐. 태그에 일부 div를 겹쳐서 표시합니다. 제대로 작동하지 않습니다.

div에 랩핑하면 팝 오버가 표시되지 않습니다. 내 코드에서 뭐가 잘못 됐는지 알려주거나 나에게 제안을 해줘. 기본적으로

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> 

Answer 1

는 팝 오버는 요소의 오른쪽에 표시됩니다.

마다 <div> (요소)의 블록

<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> 

data-trigger="focus"

데이터 트리거가 = 외부를 클릭 할 때 팝 오버가 닫히고 속성 "포커스"data-toggle="popover"에 속성을 조정할 요소 :

에디 귀하의 자바 스크립트

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

Answer 2

답변을 찾았습니다.

div가 하나의 div로 감싸고이 div에 팝업을 지정하고 스타일을 지정하십시오. 코드는 아래와 같습니다.

<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>