Tooltips rendered after `onMounted` aren't initializing

[jimmiejackson414]

Discussed in https://github.com/themesberg/flowbite/discussions/784

^{Originally posted by jimmiejackson414 January 23, 2024} I have a Nuxt3 project that I'm currently implementing tooltips in. I have a side navigation bar that uses tooltips, and they work fine.

I have a page where data is being loaded during the onMounted lifecycle from the backend, and so while that is being loaded, the page has a spinner inside of a v-if. Once the data loads into my store, the v-else triggers and the child components render to the page (including the tooltips).

I believe that because the components render "late" in this way, the tooltips can't initialize properly. I've tried importing the initTooltips method from flowbite and setting a watcher on the data, so that once the data is loaded then I can initialize the tooltips, however this still doesn't work. Any ideas how I can get this to work?

Here's the simplified version: page.vue

<script lang='ts' setup>
  import { initTooltips } from 'flowbite';

  const { data, pageLoading } = storeToRefs($store);

  watch(data, async (newVal) => {
    if (newVal.selected?.categories.length && !pageLoading.value) {
      await nextTick();
      console.log(`initTooltips`);
      initTooltips();
    }
  }, { deep: true });
</script>

<template>
  <div>
    <loading-page v-if="pageLoading" />
    <div v-else>
      ...child components with tooltips
    </div>
  </div>
</template>

[SaqibSyed1014]

facing same problem.

[zoltanszogyenyi]

Hey @SaqibSyed1014, @jimmiejackson414,

Please check our upgraded Nuxt guide using a composable:

https://flowbite.com/docs/getting-started/nuxt-js/#data-attributes

The starter repo template has also been updated:

https://github.com/themesberg/tailwind-nuxt-starter

Cheers, Zoltan