Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use with Nuxt3 #1085

Open
marcodarko opened this issue Sep 27, 2022 · 1 comment
Open

Use with Nuxt3 #1085

marcodarko opened this issue Sep 27, 2022 · 1 comment

Comments

@marcodarko
Copy link

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant