Programatically create and mount components in the same container.

[mdominiak2]

Hi, I want to render several tooltips for several elements in the same container.

e.g.

<template>
  <div>
    <div v-tooltip="'message 1'" class="m-1 h-5 w-5 bg-neutral-15">1</div>
    <div v-tooltip="'message 2'" class="m-1 h-5 w-5 bg-neutral-15">2</div>
    <div v-tooltip="'message 3'" class="m-1 h-5 w-5 bg-neutral-15">3</div>
    <div v-tooltip="'message 4'" class="m-1 h-5 w-5 bg-neutral-15">4</div>
  </div>
</template>

I have a directive written in nuxt

import { Directive, render } from 'vue';
import { Placement } from '@floating-ui/vue';
import Tooltip from '../components/tooltip/Tooltip.vue';

const tooltipDirective: Directive<HTMLElement, string | undefined> = {
    mounted(el: HTMLElement, content) {
        const message = content.value;
        if (message) {
            const placement: Placement = (content.arg ?? 'bottom') as Placement;
            const tooltip = h(Tooltip, { message, reference: ref(el), placement });
            if (el.parentElement) {
                render(tooltip, el.parentElement);
            }
        }
    },
    unmounted(el: HTMLElement) {
        if (el.parentElement) {
            render(null, el.parentElement);
        }
    },
};

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('tooltip', tooltipDirective);
});

It works if there is one tooltip per container, but if we have more tooltips, only the last is rendered.
When I add el.parentElement._vnode = null before render function it works, but it is probably not the correct solution.

[mdominiak2]

I can write something like that

const tooltipDirective: Directive<HTMLElement, string | undefined> = {
    mounted(el: HTMLElement, content) {
        const message = content.value;
        if (message) {
            const placement: Placement = (content.arg ?? 'bottom') as Placement;
            const tooltip = h(Tooltip, { message, reference: ref(el), placement });
            if (el.parentElement) {
                el.parentElement._vnode = null;
                render(tooltip, el.parentElement);
                el.store = { _vnode: el.parentElement?._vnode };
            }
        }
    },
    unmounted(el: HTMLElement) {
        if (el.parentElement) {
            el.parentElement._vnode = el.store?._vnode;
            render(null, el.parentElement);
        }
    },
};

Where I save _vnode and on unmounted I try to remove tooltips correctly.