Helper Icon Image
Unlimited Access

Upgrade to plan to get access to unlimited reports

Upgrade

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 Photo booth beard 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.

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.

Hover 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.

Four Directions

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

HTML Tags

And with custom HTML added:

Color Tooltips

We set a custom class with ex. data-bs-custom-class="primary-tooltip" to scope our background-color primary appearance and use it to override a local CSS variable.

Theme Settings
Color Scheme
Light
Dark
Layout Mode
Fluid
Detached
Topbar Color
Light
Dark
Gradient
Menu Color
Light
Dark
Brand
Sidebar Size
Default
Compact
Condensed
Hover View
Full Layout
Hidden
Container Width
Layout Position