1. Hyper
  2. Base UI
  3. Tooltips

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
Color Scheme
Width
Purchase Now