VTooltip Not Rendering Inside Component

mohaDev

I'm experiencing an issue where VTooltip does not render correctly when used inside a custom component (ButtonEyeSvg.vue) as an action within DataTable. However, if I use VTooltip directly inside the template, it works fine
Inside DataTable, define an action column where a component (ButtonEyeSvg.vue) is used
<template #action="props">
<ButtonEyeSvg :alt="'Ver'" @click="showLead(props.cellData.id)" />
</template>
The ButtonEyeSvg.vue component contains:
<template>
<VTooltip>
<button class="text-blue-400 hover:text-blue-700">
<EyeSvg />
</button>
<template #popper>
{{ alt }}
</template>
</VTooltip>
</template>
This results in the following Vue warning in the console
[Vue warn]: Failed to resolve component: VTooltip
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
However, if I use VTooltip directly inside DataTable, it works fine:
<template #action="props">
<VTooltip>
<button
class="text-blue-400 hover:text-blue-700"
@click="showLead(props.cellData.id)"
>
<EyeSvg />
</button>
<template #popper>
Ver
</template>
</VTooltip>
</template>

mohaDev

I'm experiencing an issue where VTooltip does not render correctly when used inside a custom component (ButtonEyeSvg.vue) as an action within DataTable. However, if I use VTooltip directly inside the template, it works fine
Inside DataTable, define an action column where a component (ButtonEyeSvg.vue) is used
<template #action="props"> <ButtonEyeSvg :alt="'Ver'" @click="showLead(props.cellData.id)" /> </template>
The ButtonEyeSvg.vue component contains:
<template> <VTooltip> <button class="text-blue-400 hover:text-blue-700"> <EyeSvg /> </button> <template #popper> {{ alt }} </template> </VTooltip> </template>
This results in the following Vue warning in the console
[Vue warn]: Failed to resolve component: VTooltip
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
However, if I use VTooltip directly inside DataTable, it works fine:
<template #action="props"> <VTooltip> <button class="text-blue-400 hover:text-blue-700" @click="showLead(props.cellData.id)" > <EyeSvg /> </button> <template #popper> Ver </template> </VTooltip> </template>

allan

Could you create a test case on StackBlitz so I can take a look into it please?

Allan

mohaDev

https://stackblitz.com/edit/vue-3-composition-api-demo-xt51utnx?file=src%2Fcomponents%2FButtonSvg%2FButtonEyeSvg.vue
pls check this

allan

Many thanks - I'll take a detailed look on Monday.

Allan

mohaDev

ok thanks

allan

That's interesting - thanks for the test case.

The workaround is to import the tooltip component in your ButtonEyeSvg component:

import { Tooltip } from 'floating-vue';

Updated example.

For some reason the context doesn't appear to be getting the globally available components - I'll have a look into that. It will be something to do with the h and render calls I make...

Allan

mohaDev

Yes, it works fine if I remove the global import from app.js and import it into the component, thanks for the help.

`

import EyeSvg from '@/Components/Svg/EyeSvg.vue'; import { vTooltip } from 'floating-vue'; defineProps({ alt: { type: String, default: 'Ver' // Valor predeterminado } });

<template>
<button v-tooltip="alt"
class="text-blue-400 hover:text-blue-700"
>
<EyeSvg />
</button>
</template>
`