Popover
A popover is a small overlay with a title and a body, for information that doesn't fit in a tooltip.
Default markup
To create a default popover use:
<button type="button" class="btn" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?"> Click to toggle popover </button>Four directions
Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.
<div class="btn-list">
<button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover"> Popover on top </button>
<button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover"> Popover on right </button>
<button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover"> Popover on bottom </button>
<button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover"> Popover on left </button>
</div>Popover on hover
A popover can open on click, hover, focus or manual, set with data-bs-trigger. This one opens on hover. See the Bootstrap documentation for the details.
<button type="button" class="btn btn-primary" data-bs-trigger="hover" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?"> Hover to toggle popover </button>JavaScript
Tabler automatically initializes all elements with data-bs-toggle="popover" on page load. This is the code that runs:
onDOMContentLoaded(() => {
for (const popoverTriggerEl of document.querySelectorAll<HTMLElement>('[data-bs-toggle="popover"], [data-tblr-toggle="popover"]')) {
try {
const options = {
delay: Manipulator.getDataAttribute(popoverTriggerEl, 'delay') ?? { show: 50, hide: 50 },
placement: Manipulator.getDataAttribute(popoverTriggerEl, 'placement') ?? 'auto',
}
Popover.getOrCreateInstance(popoverTriggerEl, options)
} catch (error) {
console.error(error)
}
}
})To use your own options, create the instance yourself. It replaces the one Tabler created, so only your options apply:
const el = document.getElementById('my-popover');
new tabler.Popover(el, { customClass: 'popover-wide', trigger: 'focus' });To read or control the existing instance without changing its options, use tabler.Popover.getInstance(el) or tabler.Popover.getOrCreateInstance(el).
Accessibility
- The trigger must be a
buttonor a link with anhref, so it can take focus. Bootstrap managesaria-describedbywhile the popover is open. - Popovers open on click by default, which is what makes their content reachable. If you switch to
data-bs-trigger="hover", the content becomes unreachable by keyboard. - Set
data-bs-trigger="focus"to make a popover dismiss itself when focus leaves, which is the closest thing to Escape behavior. - Tabler enables HTML in a popover only when you set
data-bs-html="true". Leave it off for content that comes from users. - Keep the title and body as text. A popover holding a form is a modal in disguise - use a real dialog for that.
Class reference
Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.
popover | component | Container element, positioned by Bootstrap |
popover-header | part | Title bar |
popover-body | part | Content area |
popover-arrow | part | Pointer towards the trigger, positioned by Bootstrap |
CSS
Variables
The component uses local CSS variables
on .popover for real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. Source: core/scss/bootstrap/_popover.scss.
--popover-zindex: #{$zindex-popover};
--popover-max-width: #{$popover-max-width};
@include rfs($popover-font-size, --popover-font-size);
--popover-bg: #{$popover-bg};
--popover-border-width: #{$popover-border-width};
--popover-border-color: #{$popover-border-color};
--popover-border-radius: #{$popover-border-radius};
--popover-inner-border-radius: #{$popover-inner-border-radius};
--popover-box-shadow: #{$popover-box-shadow};
--popover-header-padding-x: #{$popover-header-padding-x};
--popover-header-padding-y: #{$popover-header-padding-y};
@include rfs($popover-header-font-size, --popover-header-font-size);
--popover-header-color: #{$popover-header-color};
--popover-header-bg: #{$popover-header-bg};
--popover-body-padding-x: #{$popover-body-padding-x};
--popover-body-padding-y: #{$popover-body-padding-y};
--popover-body-color: #{$popover-body-color};
--popover-arrow-width: #{$popover-arrow-width};
--popover-arrow-height: #{$popover-arrow-height};
--popover-arrow-border: var(--popover-border-color);Sass variables
Override these variables before importing Tabler to change the defaults. Source: core/scss/_variables.scss.
$popover-font-size: $font-size-sm;
$popover-bg: var(--bg-surface);
$popover-max-width: 276px;
$popover-border-width: var(--border-width);
$popover-border-color: var(--border-color);
$popover-border-radius: var(--border-radius-lg);
$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}); // stylelint-disable-line function-disallowed-list
$popover-box-shadow: var(--shadow-lg);
$popover-header-font-size: $font-size-base;
$popover-header-bg: transparent;
$popover-header-color: $headings-color;
$popover-header-padding-y: 0.5rem;
$popover-header-padding-x: $spacer;
$popover-body-color: inherit;
$popover-body-padding-y: 0.5rem;
$popover-body-padding-x: 0.5rem;
$popover-arrow-width: 1rem;
$popover-arrow-height: 0.5rem;
