q-tooltip with html content

[s-light]

hello community,

i would like to have something like qtooltip
but with html content -
i tried with the v-html but that did not work:
[plugin:vite:vue] v-html will override element children.

i also tried to nest the content -
that leads to maybe non valid html as i need to use a div inside of my target span element...
(i try to build an sort of Abbreviation tooltip for my Markdown rendering..)
but at least this way i get the content to show (example below)

this feels a little hackisch..
so is there any cleaner way to do this??

sunny greetings
stefan

example:
DevTooltip.vue

<template>
    <q-page class="flex column" style="align-items: center">
        <section style="overflow: scroll">
            <h2>tooltip test</h2>
            <div class="q-gutter-sm">
                <q-btn color="primary" @click="showing = true" label="Show" />
                <q-btn color="primary" @click="showing = false" label="Hide" />
            </div>
            <span>
                PING<q-tooltip
                    anchor="center middle"
                    self="center middle"
                    class="MDAbbrContent bg-amber text-black shadow-4"
                    max-width="30em"
                    v-model="showing"
                >
                    <div>
                        <div v-html="htmlContentTest"></div>
                    </div>
                </q-tooltip>
            </span>
        </section>
    </q-page>
</template>

<script setup>
import { ref } from "vue";
const htmlContentTest = ref(`
<h1>Some h1 Heading..</h1>
<p>
    Ping Pong Text.. <br>
    und ein bisshcen mehr text.. noch damit wir die llänge sprengen brauchen wir sehr sehr viele wörter hin einer Zeile... tja - dann schreiben wir ncoh mehr
</p>
<p>and some more lines...</p>
`);

const showing = ref(false);
</script>

<style lang="sass">
.q-tooltip.MDAbbrContent
    h1
        font-size: 1.5rem
        line-height: 110%
        margin-top: 0.5rem
        margin-bottom: 0.5rem
    p
        margin-bottom: 0.5rem
</style>

[yusufkandemir]

It would have been very helpful if you shared your initial thing that didn't work. But, I think you used v-html, but also included content in the default slot, which the error clearly explains.

You can simply do this:

<q-tooltip v-html="htmlContentTest" />

[s-light]

thanks for your answer!

i have written in the text that i used v-html
sorry to forget to post the full example..

just recreated things:

<template>
    <span class="MDAbbr">
        {{ item.content
        }}<q-tooltip
            v-html="htmlcontent"
        ></q-tooltip>
</span>
</template>

gives

[ESLint] Using v-html on component may break component's content. (vue/no-v-text-v-html-on-component)
(its only a warning..)

in the meantime i know that i have to use a full component inside the tooltip to get all my needed rendering / styling..
and as fare as i know that is really only simply possible with the shown way as child element.
(that at least works for me currently ;-) )