{% extends "partials/base.html" %} {% load static %} {% block title %}Popovers{% endblock title %} {% block extra_css %} {% endblock extra_css %} {% block pagetitle %} {% include "partials/page-title.html" with pagetitle="Base UI" title="Popovers" %} {% endblock pagetitle %} {% block content %}
Popover is a component which displays a box with a content after a click on an element - similar to the tooltip but can contain more content.
Use the focus
trigger to dismiss popovers
on the user’s next click of a different element than the toggle element.
Use the attribute data-bs-trigger="hover"
to show the popover on hovering the element.
Four options are available: top, right, bottom, and left aligned.
You can customize the appearance of popovers using CSS variables. We set a
custom class with
data-bs-custom-class="primary-popover"
to scope our custom appearance and use it to
override some of the
local CSS variables.
Elements with the disabled
attribute
aren’t interactive, meaning users cannot hover or click them to trigger a
popover (or tooltip). As a workaround, you’ll want to trigger the popover from a
wrapper <div>
or <span>
and override the
pointer-events
on the disabled element.