Tooltips

Examples

Hover over the links below to see tooltips:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.


    <p class="muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip"
                                                        title="Default tooltip">you probably</a>
        haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag
        stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel
        <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl
        chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg
        marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#"
                                                                                        data-toggle="tooltip"
                                                                                        title="Another one here too">whatever
            keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip"
                                                                 title="The last tip!">twitter
            handle</a> freegan cred raw denim single-origin coffee viral.
    </p>

Static demo


    <div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
        <div class="arrow"></div>
        <div class="tooltip-inner">
            Tooltip on the top
        </div>
    </div>
    <div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
        <div class="arrow"></div>
        <div class="tooltip-inner">
            Tooltip on the right
        </div>
    </div>
    <div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
        <div class="arrow"></div>
        <div class="tooltip-inner">
            Tooltip on the bottom
        </div>
    </div>
    <div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
        <div class="arrow"></div>
        <div class="tooltip-inner">
            Tooltip on the left
        </div>
    </div>

Interactive demo

Hover over the buttons below to see their tooltips.


    <div class="bd-example-tooltips">
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top"
                title="Tooltip on top">Tooltip on top
        </button>
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right"
                title="Tooltip on right">Tooltip on right
        </button>
        <button type="button" class="btn btn-secondary" data-toggle="tooltip"
                data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom
        </button>
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left"
                title="Tooltip on left">Tooltip on left
        </button>
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true"
                title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
            Tooltip with HTML
        </button>
    </div>

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