Popover does not displaying proper align Bootstrap

Question

I am working on one project where I want to display some value in a popover. But as I tried many things it's not displaying properly. Have a look at my code. I wrap some div in a tag for making a popover on it. it's not working properly.

if i wrap it in div then popover is not displaying. let me know whats wrong in my code or give me some suggestion.

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>

Panup Pong · Answer 1 · 2017-12-14T08:13:13.920

0

By default, the popover will appear on the right side of the element.

adjust an attribute data-toggle="popover" to every block of <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>

With data-trigger="focus"

data-trigger="focus" attribute which will close the popover when clicking outside the element:

Edit your javascript

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

edited Dec 14 '17 at 08:13

answered Dec 14 '17 at 07:59

Panup Pong

1,871
2
22
44

Thank you for your solution but it does not look like what I want. Because if i put data-toggle="popover" data-trigger="focus" data-container="body" data-placement="right" data-html="true" id="login" then evry div have a popover but i want one popover to all div. – Awesome Designer Dec 14 '17 at 08:48
I'm not sure how to do as you want because Bootstrap Popover applies absolute positioning to the popover in order to position the popover near the triggering element. – Panup Pong Dec 14 '17 at 09:00

score 0 · Answer 2 · answered Dec 14 '17 at 09:24

I found the answer.

I wrap divs in single div and give a popover to this div and put some style. The code is given below.

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

Popover does not displaying proper align Bootstrap

2 Answers2