Placement Props strange behaviour

[Biosha]

Hello,

I'm confronting a new issue with the tooltips. I'm using it with the Tippy component and the default props directly in the main.ts. Here is a sample of the configuration :

<template v-for="(place, index) in placeMap" :key="index">
    <Tippy theme="small">
        <img
            class="icon"
            :class="{
                myPos: myPos(place.placeId),
                canGo: canGo(place.placeId),
                imgHidden: !showPlace(place.placeId)
            }"
            :src="getImg('map', 'icon', place.icon)"
            :style="{ left: place.posLeft + 'px', top: place.posTop + 'px' }"
            @click="moveTo(place.placeId)"
            @mouseenter="isHover(place.name, place.placeId, true)"
            @mouseleave="isHover(place.name, place.placeId, false)"
        />
        <template #content>
            {{ $t(`place.name.${place.name}`) }}
        </template>
    </Tippy>
</template>

And here is my main.ts

const vueTippyProps = {
    directive: 'tippy',
    component: 'Tippy',
    defaultProps: {
        // placement: 'bottom-start',
        followCursor: true,
        allowHTML: true,
        inlinePositioning: true,
        duration: [50, 50],
        hideOnClick: false
    }
};

createApp(App)
    .use(store)
    .use(router)
    .use(i18n)
    .mixin(mixin)
    .use(VueTippy, vueTippyProps)
    .mount('#app');

The tooltip is not placing at the bottom-start as specified in the defaultProps when my component is in its default position. When I scroll down, the tooltip go at the right place. If I comment the placement props, the behaviour seems normal. I tried with differents placement but the behaviour is still the same.

Here are gif to explain clearly. : with placement : without placement

I don't get this issue if I'm using v-tippy directive directly in the <img /> :

<template v-for="(place, index) in placeMap" :key="index">
        <img
            class="icon"
            :class="{
                myPos: myPos(place.placeId),
                canGo: canGo(place.placeId),
                imgHidden: !showPlace(place.placeId)
            }"
            :src="getImg('map', 'icon', place.icon)"
            :style="{ left: place.posLeft + 'px', top: place.posTop + 'px' }"
            @click="moveTo(place.placeId)"
            @mouseenter="isHover(place.name, place.placeId, true)"
            @mouseleave="isHover(place.name, place.placeId, false)"
            v-tippy="{
                content: formatContent($t(`place.name.${place.name}`)),
                theme: 'small'
            }"
        />
</template>

[KABBOUCHI]

has wrapper element, `span` by default, you can try changing the wrapper element to `div`? ``

[Biosha]

:+1: works like a charm ! Thanks !

I didn't find this parameters in the documentation or did I miss it ? Is there a way to declare it in the defaultProps ?

[KABBOUCHI]

I didn't find this parameters in the documentation or did I miss it ?

https://vue-tippy.netlify.app/flavor/component

Is there a way to declare it in the defaultProps ?

tag is something specific to the TippyComponent, defaultProps is for Tippy.js

I'll try to make it configurable globally in the next release