Hi @wicked helm. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#<ViewTransitions /> script issue
pale gustBOT
It seems like you're on the right track with using the astro:page-load event to re-run your scripts after page navigation. However, the issue you're experiencing might be due to the way the third-party script is handling its initialization.
In your first script block, you're defining whTooltips inside the event listener for astro:page-load. This means that whTooltips is only available within the scope of that function and won't be accessible to the third-party script. You might want to define whTooltips outside of the event listener to make it globally accessible:
<script>
const whTooltips = {
iconSize: "small",
colorLinks: true,
iconizeLinks: true,
renameLinks: true,
};
document.addEventListener("astro:page-load", () => {
// Your code here
});
</script>
In your second script block, you're correctly checking if the script has already been added to the page before appending it again. However, the third-party script might be adding event listeners or other side effects each time it's loaded, which could be causing the duplicate tooltips.
One possible solution could be to remove the old script before adding a new one. This might prevent the duplication issue:
<script>
document.addEventListener("astro:page-load", () => {
const oldScript = document.querySelector(
'script[src="<https://wow.zamimg.com/js/tooltips.js"]'>
);
if (oldScript) {
oldScript.remove();
}
const script = document.createElement("script");
script.src = "<https://wow.zamimg.com/js/tooltips.js">
document.body.appendChild(script);
});
</script>
Please note that this is a general solution and might not work depending on how the third-party script is implemented. If the issue persists, you might need to reach out to the maintainers of the third-party script for more specific guidance.