How to use and initialize bootstrap5 tooltip in nuxt (data-bs-toggle="tooltip" )?

Bootstrap 5 documentation says I have to add this code to initialize tooltips.

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

How should this be done properly in nuxt so the tooltips are initialized and can be used globally?

the nearest thing I found was in an answer to this question: How can add bootstrap tooltip inside Vue.js

where it states to do by creating a bs-tooltips.js file in the plugin folder with the following code:

import Vue from 'vue'

const bsTooltip = (el, binding) => {
    const t = []

    if (binding.modifiers.focus) t.push('focus')
    if (binding.modifiers.hover) t.push('hover')
    if (binding.modifiers.click) t.push('click')
    if (!t.length) t.push('hover')

    $(el).tooltip({
        title: binding.value,
        placement: binding.arg || 'top',
        trigger: t.join(' '),
        html: !!binding.modifiers.html,
    });
}

Vue.directive('tooltip', {
    bind: bsTooltip,
    update: bsTooltip,
    unbind (el) {
        $(el).tooltip('dispose')
    }
});

then add this to the nuxt config file:

plugins: [
    '~/plugins/bs-tooltips.js'
],

and then this should work:

<button v-tooltip="'Tooltip text'">Hover me</button>
<button v-tooltip.click="Tooltip text">Click me</button>
<button v-tooltip.html="Tooltip text">Html</button>
<button v-tooltip:bottom="Tooltip text">Bottom</button>
<button v-tooltip:auto="Tooltip text">Auto</button>

but that throws following ERROR: $ is not defined

My guess is that this is probably meant for bootstrap 4 / jQuery and probably an older version of nuxt (the answer is from 2018)

Has anyone integrated this feature and bootstrap 5 in nuxt 2? Is interesting if it works as a directive of course, but I'm inclined to just have it work as the documentation of bootstrap states, with data-bs-toggle="tooltip" and data-bs-title attributes

the old approach of integrating as a plugin works, but with the following code:

I created the bs-tooltips.js file in my plugins folder, then put the following code into that:

export default function ({ app }) {
  if (process.client) {
    window.onload = () => {
      const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
      tooltips.forEach((tooltip) => {
        if (!tooltip._tooltip) {
          new window.bootstrap.Tooltip(tooltip);
        }
      });
    };
  }
}

then add this to the nuxt config file:

plugins: [
    '~/plugins/bs-tooltips.js'
],

after that:

<a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a>

should work as expected

NOTE: Be Sure that bootstrap itself with the bootrap.bundle.min.js or popper is properly integrated into your nuxt.js application and all dropdowns and useal bootstrap components are already working as expected