Use with Nuxt3

[marcodarko]

Problem

Tip delegation doesn't do anything with an SSR app using Nuxt3, even with elements available at load time and dynamic elements.

<div id="tippyRoot">
<App/>
</div

<a
     data-tippy-content="Learn More About Schema.org"
     href="https://schema.org/"
     target="_blank"
     >Schema.org</a>

delegate("#tippyRoot", {
        target: "[data-tippy-content]",
        content: 'loading',
        animation: "scale",
        trigger:'hover',
        onShown(instance) {
          instance.setContent(instance.reference.dataset.tippyContent);
        },
 });

All elements have the appropriate data attribute but nothing seems to work.

Solution

Seems like delegate would do the job but something is off. even setting a timeout before initializing doesn't work to make sure everything is loaded. Any suggestions or documentation on how to use this library with Nuxt3? Love the library but after we switched to SSR I'm having a ton of issues getting it to work.

[marcodarko]

seems like the trigger is not valid: hover => mouseenter, but it was hard to debug as there was no warning. Also had to change onShown => onShow.