Bootstrap Popover X Demo bootstrap-popover-x

Thankful to Krajee!
to get more out of us.

NOTE: The plugins on this site, strive to use a lot of CSS3 and HTML5 features in addition to JQuery. Hence, one may find either CSS3, HTML5 or a mix of both to achieve a plugin's requirements in many implementations.

Bootstrap Popover Extended - Popover with modal behavior, multiple placements, automatic placements, ability to load content dynamically, and more other styling enhancements. The plugin enhances the styles for Bootstrap 3.x, and incorporates various additional styling options. This plugin was originally inspired by BootstrapModalPopover for Bootstrap 2.x, and has been significantly enhanced for Bootstrap 3.x and includes various new features.




×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

PopoverX Placement Options



×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

PopoverX Automatic placement configurations. Scroll your screen before opening a popover, or resize your device screen and then open a popover .

×Large PopoverX

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Medium PopoverX

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

PopoverX Sizes. Control sizes by adding popover-lg css class for large size or popover-md css class for medium size.

×Details

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Display popover on initialization by setting the show property.
<!-- PopoverX Placement -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover1" data-placement="top">Top</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover2" data-placement="right">Right</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover3" data-placement="bottom">Bottom</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover4" data-placement="left">Left</button>

<div id="myPopover1" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover2" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover3" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover4" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover10a" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover10b" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover10c" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover10d" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover20a" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover20b" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover20c" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover20d" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>

<!-- PopoverX Auto Placements -->
<button class="btn btn-success btn-lg" data-toggle="popover-x" data-target="#myPopover30a" data-placement="auto">Auto (Any)</button>
<button class="btn btn-warning btn-lg" data-toggle="popover-x" data-target="#myPopover30b" data-placement="horizontal">Auto Horizontal</button>
<button class="btn btn-warning btn-lg" data-toggle="popover-x" data-target="#myPopover30c" data-placement="vertical">Auto Vertical</button>
<hr>
<button class="btn btn-info btn-lg" data-toggle="popover-x" data-target="#myPopover40a" data-placement="auto-top">Auto Top</button>
<button class="btn btn-info btn-lg" data-toggle="popover-x" data-target="#myPopover40b" data-placement="auto-bottom">Auto Bottom</button>
<button class="btn btn-info btn-lg" data-toggle="popover-x" data-target="#myPopover40c" data-placement="auto-right">Auto Right</button>
<button class="btn btn-info btn-lg" data-toggle="popover-x" data-target="#myPopover40d" data-placement="auto-left">Auto Left</button>
<hr>

<div id="myPopover30a" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover30b" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover30c" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover40a" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover40b" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover40c" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>
<div id="myPopover40d" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
    </div>
</div>

<!-- PopoverX Sizes -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover13a" data-placement="right">Large</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover13b" data-placement="top">Medium</button>
 <!-- PopoverX content -->
<div id="myPopover13a" class="popover popover-default popover-lg">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Large PopoverX</div>
    <div class="popover-content">
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
</div>
<!-- PopoverX content -->
<div id="myPopover13b" class="popover popover-default popover-md">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Medium PopoverX</div>
    <div class="popover-content">
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
</div>

<!-- PopoverX Show on init -->
<button type="button" class="btn btn-info" data-toggle="popover-x" data-target="#myPopover15a" data-placement="right" data-show="true"><i class="glyphicon glyphicon-exclamation-sign"></i> Info</button>
 <!-- PopoverX content -->
<div id="myPopover15a" class="popover popover-info">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Details</div>
    <div class="popover-content">
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
</div>

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

×Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

PopoverX Color Styles. Notice how the popover arrow matches the heading color style.

×Enter credentials

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Display advanced HTML formatted content (e.g. forms) along with PopoverX footer. Buttons in the footer are automatically spaced. Also note that the popover arrow style matches the footer color for top placement. In addition this example includes the auto placement functionality.

×My Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Triggering popover via javascript.

×My Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Triggering popover on hover/focus instead of click.
<!-- PopoverX Color Styles -->
<button type="button" class="btn btn-primary" style="margin-right:15px" data-toggle="popover-x" data-target="#myPopover1a" data-placement="bottom">Primary</button>
<button type="button" class="btn btn-info" style="margin-right:15px" data-toggle="popover-x" data-target="#myPopover2a" data-placement="bottom">Info</button>
<button type="button" class="btn btn-danger" style="margin-right:15px" data-toggle="popover-x" data-target="#myPopover3a" data-placement="bottom">Danger</button>
<button type="button" class="btn btn-success" style="margin-right:15px" data-toggle="popover-x" data-target="#myPopover4a" data-placement="bottom">Success</button>
<button type="button" class="btn btn-warning" style="margin-right:15px" data-toggle="popover-x" data-target="#myPopover5a" data-placement="bottom">Warning</button>
<button type="button" class="btn btn-default" style="margin-right:15px" data-toggle="popover-x" data-target="#myPopover6a" data-placement="bottom">Default</button>
 
<div id="myPopover1a" class="popover popover-primary">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
</div>

<div id="myPopover2a" class="popover popover-info">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
</div>

<div id="myPopover3a" class="popover popover-danger">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
</div>

<div id="myPopover4a" class="popover popover-success">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
</div>

<div id="myPopover5a" class="popover popover-warning">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
</div>

<div id="myPopover6a" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
</div>

<!-- Display advanced HTML content in popover with auto placement functionality -->
<!-- Button -->
<button type="button" class="btn btn-default btn-lg" data-toggle="popover-x" data-target="#myPopover1b" data-placement="auto">Login</button>
 
<!-- PopoverX content -->
<div id="myPopover1b" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Enter credentials</div>
    <form class="form-vertical">
        <div class="popover-content">
            <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
            <div class="form-group">
                <input class="form-control" placeholder="Username">
            </div>
            <input type="password" class="form-control" placeholder="Password">
        </div>
        <div class="popover-footer">
            <button type="submit" class="btn btn-sm btn-primary">Submit</button>
            <button type="reset" class="btn btn-sm btn-default">Reset</button>
        </div>
    </form>
</div>

<!-- Triggering popover via javascript. -->
<!-- Button -->
<button type="button" id="kv-btn-1" class="btn btn-default btn-lg">Launch 1</button>

<!-- PopoverX content -->
<div id="myPopover5" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>My Header</div>
    <div class="popover-content">
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
</div>

<script>
$(document).on('ready', function() {
    // use the popoverButton plugin
    $('#kv-btn-1').popoverButton({
        placement: 'left', 
        target: '#myPopover5'
    });
});
</script>

<!-- Triggering popover on hover/focus instead of click. -->
<!-- Button -->
<button type="button" id="kv-btn-2" class="btn btn-default btn-lg">Launch 2</button>

<!-- PopoverX content -->
<div id="myPopover6" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>My Header</div>
    <div class="popover-content">
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
</div>

<script>
$(document).on('ready', function() {
    $('#kv-btn-2').popoverButton({
        trigger: 'hover focus',
        target: '#myPopover6'
    });
});
</script>