Popovers
A simple popup menu to provide extra information or operations.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                popover: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="bottom" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
})
Customize variables at:/library/extend/components/_popover.scss
Component's defaults:/library/components/popover/_defaults.scss
NameDefault valueNote
$popover-font-size$font-size-sm
$popover-bgproperty.get(popover-bg)Requires @use "@library/sass/modules/property";
$popover-max-width290px
$popover-border-width0
$popover-border-colorproperty.get(popover-divider)Requires @use "@library/sass/modules/property";
$popover-border-radius8px
$popover-box-shadowproperty.get(popover-shadow)Requires @use "@library/sass/modules/property";
$popover-header-bgtransparent
$popover-header-colorproperty.get(popover-text-color)Requires @use "@library/sass/modules/property";
$popover-header-padding-y1rem
$popover-header-padding-x$spacer
$popover-body-colorproperty.get(popover-text-color)Requires @use "@library/sass/modules/property";
$popover-body-padding-y$spacer
$popover-body-padding-x$spacer
$popover-arrow-width1rem
$popover-arrow-height.5rem
$popover-arrow-color$popover-bg
$popover-arrow-outer-colorproperty.get(popover-divider)Requires @use "@library/sass/modules/property";

Make sure to read the Customize components and Understanding and using the design system guides.

{title}