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.