Popovers

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Overview

Things to know when using the popover plugin:

Popovers rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js in order for popovers to work!
Popovers require the tooltip plugin as a dependency.
If you’re building our JavaScript from source, it requires util.js.
Popovers are opt-in for performance reasons, so you must initialize them yourself.
Zero-length title and content values will never show a popover.
Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc).
Triggering popovers on hidden elements will not work.
Popovers for .disabled or disabled elements must be triggered on a wrapper element.
When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors’ overall width. Use white-space: nowrap; on your <a>s to avoid this behavior.
Popovers must be hidden before their corresponding elements have been removed from the DOM.

Example

Four options are available: top, right, bottom, and left aligned.

              
              <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                Popover on top
              </button>
              
              <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                Popover on right
              </button>
              
              <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
              sagittis lacus vel augue laoreet rutrum faucibus.">
                Popover on bottom
              </button>
              
              <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                Popover on left
              </button>

HTML Content

Place Popover HTML content anywhere within the body of your page usign .popover-content with default display:none. then append HTML using the id.

              
              <button type="button" id="pover-first" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-trigger="click">Popover on top</button>

              <!-- Place Popover HTML content anywhere within the body of your page with default display:none -->
              
              
                       
              <div  class="popover-content" style="display:none;"> 
                <!-- Popover HTML -->
                <div id="popover-first">
                    <div class="card border-0 p-2" >
                      <h5 class="title mb-3">Title <button type="button" class="close" aria-hidden="true">×</button></h5>                
                      <form>                    
                        <div class="form-group">
                          <label>Label</label>
                          <input type="text" class="form-control" placeholder="Enter" >
                        </div>
                        <div class="text-right">
                          <button type="button" class="btn btn-secondary mr-1 cancel">Cancel</button>
                          <button type="button" class="btn btn-primary">Save</button>
                        </div>
                      </form>
                    </div>
                </div>
              </div>

              /*Popover script*/
              $('[data-toggle="popover"]').popover({
                html: true,
                content: function() {
                  var id = $(this).attr('id')
                  return $('#po' + id).html();
                }
              });
              /*
              Notice the script above adds 'po' to the button ID.
              The button: id="pover-first"
              It's content div: id="popover-first"
              */
              /*close trigger*/
              $(document).on("click", ".popover .close, .popover .cancel" , function(){
                $(this).parents(".popover").popover('hide');
              });

Components

Popovers

Overview

Example

HTML Content

Title ×

Title