#### 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 mb-0" id="tooltip-container">
                                                                Tight pants next level keffiyeh <a href="#" data-bs-container="#tooltip-container" data-bs-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-bs-container="#tooltip-container" data-bs-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-bs-container="#tooltip-container" data-bs-toggle="tooltip" title="Another one here too">whatever
                                                                </a> keytar, scenester farm-to-table banksy Austin <a href="#" data-bs-container="#tooltip-container" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred
                                                                raw denim single-origin coffee viral.
                                                            </p>

#### Disabled elements

Elements with the `disabled` attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`, and override the `pointer-events` on the disabled element.

                                                            <div id="tooltip-container1">
                                                                <span class="d-inline-block" tabindex="0" data-bs-container="#tooltip-container1" data-bs-toggle="tooltip" title="Disabled tooltip">
                                                                    <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
                                                                </span>
                                                            </div>

#### Four Directions

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

                                                            <div id="tooltip-container2">
                                                                <button type="button" class="btn btn-info" data-bs-container="#tooltip-container2" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
                                                                <button type="button" class="btn btn-info" data-bs-container="#tooltip-container2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
                                                                <button type="button" class="btn btn-info" data-bs-container="#tooltip-container2" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left</button>
                                                                <button type="button" class="btn btn-info" data-bs-container="#tooltip-container2" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right</button>
                                                            </div>

#### HTML Tags

And with custom HTML added:

                                                            <div id="tooltip-container3">
                                                                <button type="button" class="btn btn-secondary" data-bs-container="#tooltip-container3" data-bs-toggle="tooltip"
                                                                    data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
                                                                    Tooltip with HTML
                                                                </button>
                                                            </div>

##### Settings

Customize the overall color scheme, sidebar menu, etc.

##### Color Scheme

Light Mode
Dark Mode

##### Width

Fluid
Boxed

##### Left Sidebar

Default
Light
Dark
Fixed
Condensed
Scrollable
Purchase Now