Using bootstrap tooltips

[hasithaa]

I was trying to integrate bootstrap tool-tips with doks, https://getbootstrap.com/docs/5.0/components/tooltips/. But still I couldn't figure out a way to do this. What is the best way to achieve this. Btw I am using child-theme.

[hasithaa]

Here are the steps I tried.

1. Enabled bootstrap bootStrapJs = true in Params.toml
2. Add followings to index.js. ( Even though I am using the child theme, I had to copy it to modify the flex search behavior)

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

With the above, I am getting the following error.
index.js:215 Uncaught ReferenceError: bootstrap is not defined

[h-enk]

Hello @hasithaa, it looks like you stumbled upon a bug.

To make it work for you:

1. Insert on line 98 of ./config/_default/config.toml:

   [[module.mounts]]
     source = "node_modules/bootstrap"
     target = "assets/js/vendor/bootstrap"

2. Copy ./node_modules/@hyas/doks/layouts/partials/footer/script-footer.html to ./layouts/partials/footer/script-footer.html
3. Replace lines 4..5 of ./layouts/partials/footer/script-footer.html:

   {{ $bs := resources.Get "js/bootstrap.js" -}}
   {{ $bs := $bs | js.Build -}}

   with:

   {{ $bs := resources.Get "js/vendor/bootstrap/dist/js/bootstrap.bundle.min.js" -}}

Also, make sure to add the tooltip styles to the whitelister section of ./config/postcss.config.js:

        ...whitelister([
          ..
          './node_modules/bootstrap/scss/_tooltip.scss',
        ]),

Will be fixed.

[hasithaa]

Thanks for the help @h-enk . I tested your steps, and it is working. But I see the following in the Chrome dev console.

DevTools failed to load SourceMap: Could not load content for http://localhost:1313/js/vendor/bootstrap/dist/js/bootstrap.bundle.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

[h-enk]

You're welcome! Ah, yes off course — also add to ./config/_default/config.toml:

[[module.mounts]]
  source = "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map"
  target = "static/js/vendor/bootstrap/dist/js/bootstrap.bundle.min.js.map"

[hasithaa]

Thanks for the help, it works.