// floating-help.js function mountFloatingHelp() { // Remove existing component const existing = document.querySelector('[data-floating-help]'); if (existing) existing.remove(); // Create component container const container = document.createElement('div'); container.setAttribute('data-floating-help', 'true'); // Component HTML container.innerHTML = ` `; document.body.appendChild(container); // Add event listeners const toggleBtn = document.getElementById('toggle-help'); const popup = document.getElementById('floating-popup'); const closeBtn = document.getElementById('close-popup'); toggleBtn.addEventListener('click', () => { popup.style.display = popup.style.display === 'none' ? 'block' : 'none'; }); closeBtn.addEventListener('click', () => { popup.style.display = 'none'; }); } // Mount on initial load mountFloatingHelp(); // Re-mount on navigation changes (SPA) const observer = new MutationObserver(mountFloatingHelp); observer.observe(document.querySelector('title'), { childList: true, subtree: true });

Get Started

Features

Documentation Index