Tippy.js
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>
tippy('[data-tippy-content]');
Customize variables at:/library/extend/components/_tippy.scss
Component's defaults:/library/components/tippy/_defaults.scss
NameDefault valueNote
$tooltip-font-size$font-size-xsm
$tooltip-line-height1.4
$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

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

{title}