{% extends "partials/base.html" %} {% load static %} {% block title %}Tooltips{% endblock title %} {% block extra_css %} {% endblock extra_css %} {% block pagetitle %} {% include "partials/page-title.html" with pagetitle="Base UI" title="Tooltips" %} {% endblock pagetitle %} {% block content %}
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.
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 over the buttons below to see the four tooltips directions: top, right, bottom, and left.
And with custom HTML added:
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.