Tooltips
The Tooltip component gives the ability to show a tip on mouse enter, and hide it on mouse leave using JavaScript.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                tooltip: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
})
Customize variables at:/library/extend/components/_tooltip.scss
Component's defaults:/library/components/tooltip/_defaults.scss
NameDefault valueNote
$tooltip-font-size$font-size-xsm
$tooltip-max-width200px
$tooltip-colorproperty.get(tooltip-color)Requires @use "@library/sass/modules/property";
$tooltip-bgproperty.get(tooltip-background)Requires @use "@library/sass/modules/property";
$tooltip-border-radius$border-radius
$tooltip-opacity1
$tooltip-padding-y$spacer / 4
$tooltip-padding-x$spacer / 2
$tooltip-margin0
$tooltip-arrow-width.8rem
$tooltip-arrow-height.4rem
$tooltip-arrow-colorproperty.get(tooltip-background)Requires @use "@library/sass/modules/property";
$form-feedback-tooltip-padding-y$tooltip-padding-y
$form-feedback-tooltip-padding-x$tooltip-padding-x
$form-feedback-tooltip-font-size$tooltip-font-size
$form-feedback-tooltip-line-heightnull
$form-feedback-tooltip-opacity$tooltip-opacity
$form-feedback-tooltip-border-radius$tooltip-border-radius

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

{title}