Integrating tippy.js with swup

[enlinquental]

Describe your problem 🧐

hello everyone! im trying to execute tippy.js and swup together in my astro website. tippy tooltip UI shows a gif played(like a preview) inside on hovering over its relevant links. this works fine on initial page view, but when we revisit the page, the UI is not shown whereas i get relevant console output. what can be the case here? what is that i need to modify the code? the same happens if i run swipper.js - where swipping of images works fine but it doesnt work on page revisit.

import Swup from 'swup'
import SwupScriptsPlugin from '@swup/scripts-plugin'
import SwupA11yPlugin from '@swup/a11y-plugin'
import SwupHeadPlugin from '@swup/head-plugin'
import SwupSlideTheme from '@swup/slide-theme'
import SwupScrollPlugin from '@swup/scroll-plugin'
import SwupPreloadPlugin from '@swup/preload-plugin'
import SwupBodyClassPlugin from '@swup/body-class-plugin'
import SwupDebugPlugin from '@swup/debug-plugin'

import tippy from 'tippy.js'
import 'tippy.js/dist/tippy.css'

const swup = new Swup({
	plugins: [
		new SwupA11yPlugin(),
		new SwupHeadPlugin(),
		new SwupSlideTheme(),
		new SwupScrollPlugin(),
		new SwupPreloadPlugin(),
		new SwupBodyClassPlugin(),
		new SwupDebugPlugin()
	],
	animateHistoryBrowsing: true
})

function tippy_function() {
	try {
		tippy('.tippy_tip', {
			arrow: true,
			allowHTML: true,
			hideOnClick: false,
			offset: [0, 10],
			placement: 'auto',
			touch: true,
			content: (reference) => {
				const id = reference.getAttribute('data-template')
				const template = document.getElementById(id)
				return template.getElementsByTagName('img')[0]
			}
		})
		console.log('found tippy tooltips')
	} catch (error) {
		console.log('no tippy tooltips')
	}
	console.log('leaving tippy_function')
}

function init() {
	var mytippy = new tippy_function()
}

if (document.readyState === 'complete') {
	init()
	console.log('tippy initialised')
} else {
	document.addEventListener('DOMContentLoaded', () => {
		init(), console.log('tippy initialised')
	})
}

swup.hooks.on('page:view', () => {
	init()
	console.log('tippy reloaded')
})

What is your question? 🙋‍♀️

tippy.js UI shows on initial page loading and doesnt shows on page revisit. can someone help with what went wrong in my code?

URL to minimal reproduction 🔗

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for answers to my question
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

I'd recommend you create a minimal reproduction somewhere online that shows the issue. That way, it's super easy for others to jump in. Just from looking at the code, it seems correct, so the devil is in the details as always :)

[enlinquental]

sure 👍

[enlinquental]

shared 👍

[hirasso]

@enlinquental you can wrap your code blocks on GitHub in three backticks to make it better readable. More information: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks

[enlinquental]

i didnt know that, thank you 👍

[enlinquental]

https://codesandbox.io/p/devbox/j85wvd

uploaded my website here, please check, and let me know if you face any trouble to load.

[enlinquental]

do check the website as desktop view.
tippy is visible in the about section.

[hirasso]

Something is not right with this demo. Navigating between pages kills the browser, even without the main script (app_exp.js) that initializes swup and tippy being included. Looks like an issue with CodeSandbox:

Does it transition on your end?

[enlinquental]

no its working fine on my side; it takes awhile to load next page. on local it is fast

[hirasso]

You have installed the official astro integration of swup but then you have another initialization of swup in your main script (app_exp.js). That makes two swup instances working against each other.

There are two ways to resolve this:

1. use swup directly: https://codesandbox.io/p/devbox/suspicious-sun-forked-yrdgrg
2. use the astro integration together with globalInstance set to true: https://github.com/swup/astro?tab=readme-ov-file#configglobalinstance – If you decide to go that route, make sure to remove the id="swup" from your <main> element, otherwise it might overwrite window.swup

[enlinquental]

i went with 1st solution, and its working as expected! 💯

i checked the forked demo-website, and observed the changes made. I replicated the same in my local with following steps:

• uninstalled official astro-swup integration
• installed swup and all necessary plugins
• tippyjs is working well 👍

Understood what was happening, now i got the clarity
Thank you so much @hirasso and @daun for the support!🙌

[hirasso]

Glad to hear it's working now. Best of luck with your site!

[enlinquental]

Thank you 🙌