Skip to content

Add bootstrap JS-plugin initialization utility to storefront JS

Add bootstrap JS-plugin initialization utility to storefront JS


This document represents an architecture decision record (ADR) and has been mirrored from the ADR section in our Shopware 6 repository. You can find the original version here


  • Some Bootstrap JavaScript plugins have to be initialized manually to the desired DOM elements, see:
  • This is not needed for all Bootstrap plugins. Modals for example work out of the box without extra initialization.
  • Currently, we only initialize Tooltips using src/utility/tooltip/tooltip.util.js
  • On dynamic content changes (listing pagination, ajax OffCanvas cart, etc.) Bootstrap plugins like Tooltip are no longer working.
  • For example: It is not possible to show Tooltips in the OffCanvas cart without extra/manual work in JavaScript.


  • Add a new module src/utility/bootstrap/bootstrap.util in favor of TooltipUtil to consider more Bootstrap plugins in the future.
  • Currently, it initializes Tooltip and Popover because those are the only Bootstrap plugins which have a documented manual initialization.
  • We use the "selector" option in order to initialize Bootstrap plugins on selectors, which are added dynamically to the HTML. See:


  • In the main.js, BootstrapUtil.initBootstrapPlugins() is used instead of new TooltipUtil() to initialize Popovers as well.
  • TooltipUtil is deprecated.
  • Since we use event delegation ("selector" option) inside BootstrapUtil we don't need to manually re-initialize the Bootstrap plugins after dynamic content changes, so it works automatically for all [data-toogle="tooltip"] and [data-toogle="popover"] selectors.