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

Question

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

HenryAveMedi · Accepted Answer · 2023-05-12 16:34:37Z

1

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

edited May 12, 2023 at 16:34

answered May 12, 2023 at 8:11

HenryAveMedi

2062 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

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

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

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

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related