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="&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;">
                        Tooltip with HTML
                    </button>
                </div>
                
TODAY
Monday
18 th Sep
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