Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
  bundles: {
    main: {
      pages: ['**/*.html'],
      components: {
        tippy: true
Basic Usage
You can build your own using the previewer
<button data-tippy-content="Tooltip">Text</button>
<button data-tippy-content="Another Tooltip">Text</button>
Customize variables at:/library/extend/components/_tippy.scss
Component's defaults:/library/components/tippy/_defaults.scss
NameDefault valueNote
$tooltip-colorproperty.get(tooltip-color)Requires @use "@library/sass/modules/property";
$tooltip-bgproperty.get(tooltip-background)Requires @use "@library/sass/modules/property";

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