Static popover

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

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.



    <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


    <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
Friday
5 th May
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

Notifications

Cloud Sync

Retro Thrusters