Essentially I am trying to write a tooltip component, and I would like for the tooltip dialogue to be absolutely positioned relative to the source of the tooltip. To accomplish this, I would need to wrap the dialog with the source and set the source to position:relative. The problem is that I would like for both the source and tooltip text to be slots/some form of HTML, so that I can pass arbitrary icons/formatted text.

I have already tried something like:

<slot name="source">
    <slot name="text"></slot>
</slot>

but from what I gather Vue won’t allow this, as I wasn’t able to find any examples of this in documentation and didn’t work when I tried it. I’ve also looked into dynamic/higher order components, but from what it looks like in Vue you have to define a set of possible components/import all of these components beforehand.