Introduction Writing Guidelines Colors & Icons Javascript Forms Grid Blankslate Avatars Buttons Alerts Modals Tooltips Panels Popovers Tables Navigation Utilities & Markdown Miscellaneous

# Popovers

Add small overlay content, like those found in iOS, to any element for housing secondary information.

#### Title

Body of the popover

    <div class="popover popover-bottom">
        <div class="popover-arrow"></div>
        <div class="popover-heading">
            <h4>Title</h4>
        </div>
        <div class="popover-body">
            Body of the popover
        </div>
    </div>

### Positionning

#### Title

Body of the popover

    <div class="popover popover-top">
        <div class="popover-arrow"></div>
        <div class="popover-heading">
            <h4>Title</h4>
        </div>
        <div class="popover-body">
            Body of the popover
        </div>
    </div>

### Container

#### Title

Body of the popover

#### Title

Body of the popover

    <div class="popover-container">
        <button class="btn">Hello World</button>
        <div class="popover popover-top">
            <div class="popover-arrow"></div>
            <div class="popover-heading">
                <h4>Title</h4>
            </div>
            <div class="popover-body">
                Body of the popover
            </div>
        </div>
    </div>

    <div class="popover-container">
        <button class="btn">Hello World</button>
        <div class="popover popover-bottom">
            <div class="popover-arrow"></div>
            <div class="popover-heading">
                <h4>Title</h4>
            </div>
            <div class="popover-body">
                Body of the popover
            </div>
        </div>
    </div>