Popovers

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



    <div class="popover bs-popover-top bs-popover-top-docs">
        <div class="arrow"></div>
        <h3 class="popover-header">Popover top</h3>
        <div class="popover-body">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem
                lacinia quam venenatis vestibulum.</p>
        </div>
    </div>

    <div class="popover bs-popover-right bs-popover-right-docs">
        <div class="arrow"></div>
        <h3 class="popover-header">Popover right</h3>
        <div class="popover-body">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem
                lacinia quam venenatis vestibulum.</p>
        </div>
    </div>

    <div class="popover bs-popover-bottom bs-popover-bottom-docs">
        <div class="arrow"></div>
        <h3 class="popover-header">Popover bottom</h3>
        <div class="popover-body">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem
                lacinia quam venenatis vestibulum.</p>
        </div>
    </div>

    <div class="popover bs-popover-left bs-popover-left-docs">
        <div class="arrow"></div>
        <h3 class="popover-header">Popover left</h3>
        <div class="popover-body">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem
                lacinia quam venenatis vestibulum.</p>
        </div>
    </div>

Live demo


    <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title"
            data-content="And here's some amazing content. It's very engaging. Right?">Click to
        toggle popover
    </button>

Four directions


    <div class="bd-example-popovers">
        <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>
    </div>

Specific markup required for dismiss-on-next-click

Dismissible popover


    <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover"
       data-trigger="focus" title="Dismissible popover"
       data-content="And here's some amazing content. It's very engaging. Right?">
        Dismissible popover</a>

TODAY

Saturday

1 th Jan

Events

Group Meeting

In 32 Minutes, Room 1B

Public Beta Release

11:00 PM

Dinner with David

17:30 PM

Q&A Session

20:30 PM

Notes

Best songs to listen while working

Last edit: May 8th, 2015

Useful subreddits

Last edit: January 12th, 2015

Quick Settings

Popovers

Static popover

Popover top

Popover right

Popover bottom

Popover left