benner3000/batt-landing-01 at main

68.2 kB

1 contributor

<!DOCTYPE html> <html lang="nl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ontdek hoe BattMobility slim en transparant omgaat met het mobiliteitsbudget</title> <meta name="description" content="Je mobiliteitsbudget kan meer dan je denkt. Ontdek hoe BattMobility het mobiliteitsbudget (verplicht vanaf jan 2026) slimmer inzet."> <link rel="canonical" href="/mobiliteitsbudget-campagne">  <meta property="og:type" content="website"> <meta property="og:url" content="/mobiliteitsbudget-campagne"> <meta property="og:title" content="Ontdek hoe BattMobility slim en transparant omgaat met het mobiliteitsbudget"> <meta property="og:description" content="Je mobiliteitsbudget kan meer dan je denkt. Ontdek hoe BattMobility het mobiliteitsbudget (verplicht vanaf jan 2026) slimmer inzet."> <meta property="og:image" content="">  <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="/mobiliteitsbudget-campagne"> <meta property="twitter:title" content="Ontdek hoe BattMobility slim en transparant omgaat met het mobiliteitsbudget"> <meta property="twitter:description" content="Je mobiliteitsbudget kan meer dan je denkt. Ontdek hoe BattMobility het mobiliteitsbudget (verplicht vanaf jan 2026) slimmer inzet."> <meta property="twitter:image" content="">  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">  <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { brand: '#4F8459', brand2: '#97D7A0', brand3: '#DFF4E1', accent1: '#F0E1CE', accent2: '#BDE3FF', bg: '#F6F9FD', text1: '#0B1220', text2: '#445069', border: '#E6EAF0', }, borderRadius: { sm: '10px', md: '10px', lg: '10px', }, fontFamily: { sans: ['Inter', 'sans-serif'], }, } } } </script>  <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebPage", "name": "Ontdek hoe BattMobility slim en transparant omgaat met het mobiliteitsbudget", "description": "Je mobiliteitsbudget kan meer dan je denkt. Ontdek hoe BattMobility het mobiliteitsbudget (verplicht vanaf jan 2026) slimmer inzet.", "publisher": { "@type": "Organization", "name": "BattMobility" } } </script> <style> /* Custom CSS for elements that need more precise control */ .tooltip { display: none; position: absolute; background-color: #BDE3FF; border: 1px solid var(--border); border-radius: 10px; padding: 1rem; width: 300px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 10; pointer-events: none; } .tooltip[aria-hidden="false"] { display: block; pointer-events: auto; } .sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; padding-bottom: env(safe-area-inset-bottom); } .flow-arrow::after { content: "→"; font-size: 1.5rem; color: var(--brand); margin: 0 1rem; } @media (max-width: 768px) { .flow-arrow::after { content: "↓"; display: block; margin: 1rem auto; text-align: center; } } /* Make sure images cover their containers */ .cover-image { width: 100%; height: 100%; object-fit: cover; } /* Hero text overlay */ .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; color: white; background: rgba(0,0,0,0.4); padding: 2rem; } /* Ensure proper image loading without layout shifts */ img { aspect-ratio: attr(width) / attr(height); } /* Lazy loading for better performance */ img[loading="lazy"] { opacity: 0; transition: opacity 0.3s; } img[loading="lazy"].loaded { opacity: 1; } </style> </head> <body class="font-sans text-text1 bg-bg">  <header id="intro" class="relative h-screen"> <figure class="h-full w-full">  <img src="https://www.dropbox.com/scl/fi/0a55wxawkpzz818eklixf/u9343637352_A_late-20s_Caucasian_typical_Belgian_urban_profes_fe38454f-caa9-4e4b-bde3-0e22199b4689_2.png?rlkey=xfnuszq9zhz6fpkrlhlf9r7iy&raw=1" alt="Elektrische auto geparkeerd in een moderne wijk" class="cover-image" width="2070" height="1380" loading="eager" decoding="async"> <div class="hero-overlay"> <div class="container mx-auto px-4 max-w-4xl"> <p class="text-brand2 text-xl mb-4">Je mobiliteitsbudget kan meer dan je denkt.</p> <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Ontdek hoe BattMobility slim en transparant omgaat met het <span class="has-tooltip text-white border-b-2 border-brand2 cursor-pointer relative" tabindex="0" aria-describedby="mobiliteitsbudget-tooltip">mobiliteitsbudget</span>.</h1> <div id="mobiliteitsbudget-tooltip" class="tooltip" role="tooltip"> <p class="mb-0"><strong>Wat is het mobiliteitsbudget?</strong> <br>Het mobiliteitsbudget is een flexibel systeem waarbij je werkgever je een budget geeft voor al je verplaatsingen. Vanaf januari 2026 wordt dit verplicht aangeboden. Je kiest zelf hoe je dit budget inzet: voor een wagen, openbaar vervoer, fiets, of zelfs je woonkosten!</p> <div class="tooltip-arrow" data-popper-arrow></div> </div> <a href="#cta" class="bg-brand hover:bg-brand2 text-white font-bold py-3 px-8 rounded-full inline-block mt-6 transition duration-200"> Meer weten? Plan een gesprek. </a> </div> </div> </figure> </header>  <section id="oplossing" class="py-16 bg-white"> <div class="container mx-auto px-4 max-w-5xl"> <h2 class="text-3xl font-bold mb-6 text-center">Met de BattMobility-oplossing kan jouw elektrische wagen je huur, hypotheek, fiets of treinreis en meer betalen.</h2> <div class="text-center mb-10"> <a href="#cta" class="bg-brand hover:bg-brand2 text-white font-bold py-3 px-8 rounded-full inline-block transition duration-200"> Meer weten? Plan een gesprek. </a> </div> <h3 class="text-2xl font-semibold mb-8 text-center">Stappenplan:</h3> <div class="grid md:grid-cols-3 gap-8">  <div class="bg-bg rounded-lg overflow-hidden"> <div class="h-48 relative"> <img src="https://images.unsplash.com/photo-1605152276897-4f618f831968?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Vrouw die elektrische auto kiest op tablet" class="cover-image" width="800" height="600" loading="lazy" decoding="async"> </div> <div class="p-6"> <h4 class="text-xl font-bold mb-4">Stap 1:</h4> <p class="text-lg">Selecteer je gewenste auto en lease hem via BattMobility</p> </div> </div>  <div class="bg-bg rounded-lg overflow-hidden"> <div class="h-48 relative"> <img src="https://images.unsplash.com/photo-1621972750743-7d0c5f5aabb3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Smartphone met app die auto deelt" class="cover-image" width="800" height="600" loading="lazy" decoding="async"> </div> <div class="p-6"> <h4 class="text-xl font-bold mb-4">Stap 2:</h4> <p class="text-lg">Zet je wagen slimmer in. En laat hem voor jou renderen.</p> </div> </div>  <div class="bg-bg rounded-lg overflow-hidden"> <div class="h-48 relative"> <img src="https://images.unsplash.com/photo-1607755942447-52330f1aca37?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Gelukkige vrouw geld tellend" class="cover-image" width="800" height="600" loading="lazy" decoding="async"> </div> <div class="p-6"> <h4 class="text-xl font-bold mb-4">Stap 3:</h4> <p class="text-lg">Geniet van extra inkomsten aan de hand van je Mobiliteitsbudget.</p> </div> </div> </div> </div> </section>  <section id="mobiliteitsbudget" class="py-16 bg-bg"> <div class="container mx-auto px-4 max-w-5xl">  <div class="mb-16"> <h2 class="text-3xl font-bold mb-6">Wat is het mobiliteitsbudget?</h2> <h3 class="text-2xl font-semibold mb-4">Vanaf januari 2026 verandert er iets groots:</h3> <p class="text-lg mb-6">Iedere werknemer met recht op een bedrijfswagen krijgt verplicht de optie om te kiezen voor een mobiliteitsbudget, wat zoveel wil zeggen als dat je zelf kiest waar je wagenbudget heen gaat. Het Mobiliteitsbudget is evenveel waard de kosten die je werkgever betaald voor je wagen. Maar het leuke? Je hoeft het budget niet volledig aan een wagen te besteden. Je beslist zélf hoe je het gebruikt.</p> <div class="bg-brand3 border-l-4 border-brand p-4 mb-6"> <p class="font-bold text-lg">Je hoeft geen wagen te nemen, maak zelf je mobiliteitspuzzel.</p> </div> </div>  <div class="mb-16"> <h2 class="text-3xl font-bold mb-8">Zo stroomt je budget – van wagen tot vrijheid</h2> <div class="flex flex-col md:flex-row items-stretch">  <div class="bg-white p-6 rounded-lg shadow-sm mb-6 md:mb-0 md:flex-1"> <h3 class="text-xl font-bold mb-4">Elektrische wagen</h3> <p>Lease een elektrische wagen binnen of onder je budget. Wat je niet gebruikt, stroomt automatisch door naar pijler 2.</p> </div> <div class="flow-arrow flex justify-center items-center"></div>  <div class="bg-white p-6 rounded-lg shadow-sm mb-6 md:mb-0 md:flex-1"> <h3 class="text-xl font-bold mb-4">Mobiliteit & wonen</h3> <p>Gebruik je restbudget voor een fietsleasing, een openbaar vervoer abbonement, een autodeel-oplossing of betaal je huur/hypotheek (als je dichtbij je werk woont of vaak thuiswerkt).</p> </div> <div class="flow-arrow flex justify-center items-center"></div>  <div class="bg-white p-6 rounded-lg shadow-sm md:flex-1"> <h3 class="text-xl font-bold mb-4">Cash uitbetaling</h3> <p>Wat overblijft na je slimme keuze krijg je extra als loon – maar daar betaal je belastingen op. Slimste keuze is: zo veel mogelijk benutten in pijler 1 en 2.</p> </div> </div> </div>  <div> <h2 class="text-3xl font-bold mb-6">Het is eindelijk zover! Mobiliteit wordt slimmer</h2> <p class="text-lg mb-6">Tot nu moest je werkgever akkoord gaan als je liever een mobiliteitsbudget wenste in plaats van een bedrijfswagen. Maar vanaf 2026 is dat anders: De regering legt wettelijk vast dat jij als werknemer automatisch recht hebt op een mobiliteitsbudget. Je hebt dus niet langer toestemming nodig. Jij kiest hoe je het mobiliteitsbudget inzet. Slimmer, vrijer en op jouw ritme.</p> <div class="text-center mt-10"> <a href="#cta" class="bg-brand hover:bg-brand2 text-white font-bold py-3 px-8 rounded-full inline-block transition duration-200"> Meer weten? Plan een gesprek. </a> </div> </div> </div> </section>  <section id="usp" class="py-16 bg-white"> <div class="container mx-auto px-4 max-w-5xl"> <h2 class="text-3xl font-bold mb-2 text-center">Waarom BattMobility het verschil maakt</h2> <h3 class="text-xl text-center mb-12">Een mobiliteitsbudget is slim. BattMobility maakt het slimmer.</h3> <div class="grid md:grid-cols-2 gap-12"> <div class="md:pt-8"> <p class="text-lg mb-6">Bij BattMobility combineer je het beste van pijler 1 én pijler 2 in één flow.</p> <ul class="space-y-4 mb-8"> <li class="flex items-start"> <svg class="w-6 h-6 flex-shrink-0 text-brand mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span>Je leaset een elektrische wagen via BattMobility (pijler 1)</span> </li> <li class="flex items-start"> <svg class="w-6 h-6 flex-shrink-0 text-brand mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span>Je laat je buren je wagen gebruiken wanneer jij hem niet nodig hebt</span> </li> <li class="flex items-start"> <svg class="w-6 h-6 flex-shrink-0 text-brand mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span>Het geld dat zo binnenkomt gaat automatisch naar pijler 2</span> </li> <li class="flex items-start"> <svg class="w-6 h-6 flex-shrink-0 text-brand mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span class="font-bold">En daarmee betaal je je andere mobiliteitsoplossingen en/of je huur/hypotheek</span> </li> </ul> </div> <div class="bg-bg p-8 rounded-lg"> <h4 class="text-xl font-bold mb-6">Extra voordelen van onze aanpak:</h4> <ul class="space-y-4"> <li class="flex items-start"> <svg class="w-6 h-6 flex-shrink-0 text-brand mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span>Wanneer je je wagen in het BattMobility-ecosysteem verhuurt.</span> </li> <li class="flex items-start"> <svg class="w-6 h-6 flex-shrink-0 text-brand mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span>Kies jij wie toegang krijgt.</span> </li> <li class="flex items-start"> <svg class="w-6 h-6 flex-shrink-0 text-brand mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span>Jij geeft aan wanneer de wagen beschikbaar is, wij doen de rest.</span> </li> <li class="flex items-start"> <svg class="w-6 h-6 flex-shrink-0 text-brand mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span>Geniet van lokale voordelen zoals gratis parkeren, een voorbehouden laadpaal.</span> </li> <li class="flex items-start"> <svg class="w-6 h-6 flex-shrink-0 text-brand mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span>Eens zin om met een andere wagen te rijden? Je krijgt toegang tot onze volledige vloot.</span> </li> </ul> </div> </div> <div class="text-center mt-12"> <a href="#cta" class="bg-brand hover:bg-brand2 text-white font-bold py-3 px-8 rounded-full inline-block transition duration-200"> Meer weten? Plan een gesprek. </a> </div> </div> </section>  <section id="case" class="py-16 bg-brand3"> <div class="container mx-auto px-4 max-w-5xl"> <div class="grid md:grid-cols-2 gap-12 items-center"> <div> <h2 class="text-3xl font-bold mb-6">Mijn auto betaalt mijn huur. Da's pas vrijheid.</h2> <blockquote class="text-xl italic mb-8 border-l-4 border-brand pl-4 py-2"> "Ik dacht dat een auto vooral geld kostte. Blijkt dat hij ook geld kan opleveren!" </blockquote> <p class="text-lg mb-6">Lisa (33) woont in Gent en werkt drie dagen per week van thuis uit. Ze had recht op een bedrijfswagen, maar die stond vaker stil dan in beweging. Via BattMobility koos ze voor een compacte elektrische wagen binnen haar mobiliteitsbudget. Ze gebruikt hem wanneer het nodig is, en laat hem door haar buren gebruiken op momenten dat ze hem zelf niet nodig heeft.</p> <p class="text-lg mb-6">"Ik verdien gemiddeld €250 per maand terug, zonder moeite. Dat bedrag gebruik ik om mijn huur te betalen. Alles gebeurt automatisch via de Batt-app. En als ik eens een grotere auto nodig heb, huur ik gewoon tijdelijk een ander type wagen uit de vloot."</p> <div class="space-y-3"> <div class="flex items-start"> <svg class="w-6 h-6 flex-shrink-0 text-brand mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span>Een eigen elektrische auto, zonder zorgen</span> </div> <div class="flex items-start"> <svg class="w-6 h-6 flex-shrink-0 text-brand mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span>Maandelijkse inkomsten die haar huur helpen dragen</span> </div> <div class="flex items-start"> <svg class="w-6 h-6 flex-shrink-0 text-brand mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span>Geen keuzestress: één app, één flow</span> </div> <div class="flex items-start"> <svg class="w-6 h-6 flex-shrink-0 text-brand mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span>Flexibele toegang tot andere wagens als het nodig is</span> </div> <div class="flex items-start"> <svg class="w-6 h-6 flex-shrink-0 text-brand mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <span>Lokale voordelen zoals gratis parkeren en een vaste laadpaal</span> </div> </div> </div> <div class="h-96 md:h-full rounded-lg overflow-hidden"> <img src="https://www.dropbox.com/scl/fi/wlbu0bp0kyraig78kwhoh/u9343637352_A_late-30s_Caucasian_typical_Belgian_urban_profes_598eb961-9055-408e-83ef-969b819f59f2_0.png?rlkey=k12cy9w7zmwxi7s7u8m9fo6n5&raw=1" alt="Lisa genietend van haar elektrische auto" class="cover-image" width="800" height="1000" loading="lazy" decoding="async"> </div> </div> </div> </section>  <section id="cta" class="py-16 bg-brand text-white"> <div class="container mx-auto px-4 text-center max-w-3xl"> <h2 class="text-3xl font-bold mb-6">Dit zit goed! Heb je al mobiliteistbudget of meer weten?</h2> <a href="mailto:sales@battmobility.be?subject=ik%20wil%20meer%20info%20iver%20de%20BattMobility%20mobiliteitsoplossingen" class="bg-white hover:bg-bg text-brand font-bold py-3 px-8 rounded-full inline-block transition duration-200"> Meer weten? Plan een gesprek. </a> </div> </section>  <section id="partners" class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-center mb-8 text-lg">BattMobility partners:</h2> <div class="flex justify-center flex-wrap gap-12"> <img src="https://via.placeholder.com/200x80?text=Olympus+Mobility" alt="Olympus Mobility logo" class="h-12 object-contain" width="200" height="80" loading="lazy" decoding="async"> <img src="https://via.placeholder.com/200x80?text=Mbrella+Mobility" alt="Mbrella Mobility management logo" class="h-12 object-contain" width="200" height="80" loading="lazy" decoding="async"> </div> </div> </section>  <footer id="footer" class="py-12 bg-text1 text-white"> <div class="container mx-auto px-4 max-w-5xl"> <h2 class="text-xl font-bold mb-6">Meer vragen bel/mail met onze mobiliteisexperts, we helpen je graag verder!</h2> <address class="not-italic"> <div class="grid md:grid-cols-3 gap-4 mb-8"> <div> <p class="font-bold">Battmobility</p> <p>Sint-Jacobsnieuwstraat 32.</p> <p>9000 Gent</p> </div> <div> <p class="font-bold">Tel:</p> <a href="tel:+3292333444" class="hover:underline">+32 9 233 34 44</a> </div> <div> <p class="font-bold">Mail:</p> <a href="mailto:sales@battmobility.be" class="hover:underline">sales@battmobility.be</a> </div> </div> </address> <p class="text-sm text-gray-400">© 2023 BattMobility. Alle rechten voorbehouden.</p> </div> </footer>  <div class="sticky-cta bg-white shadow-lg"> <div class="container mx-auto px-4 py-3 flex justify-center"> <a href="mailto:sales@battmobility.be?subject=ik%20wil%20meer%20info%20iver%20de%20BattMobility%20mobiliteitsoplossingen" class="bg-brand hover:bg-brand2 text-white font-bold py-3 px-8 rounded-full inline-block transition duration-200"> Meer weten? Plan een gesprek. </a> </div> </div>  <script> document.addEventListener('DOMContentLoaded', function() { // Lazy loading images const lazyImages = document.querySelectorAll('img[loading="lazy"]'); if ('IntersectionObserver' in window) { const lazyImageObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src || lazyImage.src; lazyImage.classList.add('loaded'); lazyImageObserver.unobserve(lazyImage); } }); }); lazyImages.forEach((lazyImage) => { lazyImageObserver.observe(lazyImage); }); } else { // Fallback for browsers without IntersectionObserver lazyImages.forEach((lazyImage) => { lazyImage.src = lazyImage.dataset.src || lazyImage.src; lazyImage.classList.add('loaded'); }); } // Tooltip functionality const tooltipTriggers = document.querySelectorAll('.has-tooltip'); const tooltips = document.querySelectorAll('.tooltip'); let activeTooltip = null; // Position tooltip relative to trigger function positionTooltip(trigger, tooltip) { const rect = trigger.getBoundingClientRect(); tooltip.style.top = `${rect.top + window.scrollY - tooltip.offsetHeight - 10}px`; tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`; // Make sure tooltip stays within viewport const tooltipRect = tooltip.getBoundingClientRect(); if (tooltipRect.left < 0) { tooltip.style.left = '10px'; } if (tooltipRect.right > window.innerWidth) { tooltip.style.left = `${window.innerWidth - tooltipRect.width - 10}px`; } } // Show or hide tooltip function toggleTooltip(triggerElement, show = true) { const tooltipId = triggerElement.getAttribute('aria-describedby'); if (!tooltipId) return; const tooltip = document.getElementById(tooltipId); if (!tooltip) return; if (show) { // Hide any currently active tooltip if (activeTooltip) { activeTooltip.setAttribute('aria-hidden', 'true'); } // Show new tooltip positionTooltip(triggerElement, tooltip); tooltip.setAttribute('aria-hidden', 'false'); triggerElement.setAttribute('aria-expanded', 'true'); activeTooltip = tooltip; } else { // Hide tooltip tooltip.setAttribute('aria-hidden', 'true'); triggerElement.setAttribute('aria-expanded', 'false'); if (activeTooltip === tooltip) { activeTooltip = null; } } } // Desktop events tooltipTriggers.forEach(trigger => { // Hover trigger.addEventListener('mouseenter', () => { if (window.innerWidth >= 768) { toggleTooltip(trigger, true); } }); trigger.addEventListener('mouseleave', () => { if (window.innerWidth >= 768) { toggleTooltip(trigger, false); } }); // Keyboard navigation trigger.addEventListener('focus', () => { toggleTooltip(trigger, true); }); trigger.addEventListener('blur', () => { toggleTooltip(trigger, false); }); }); // Mobile events tooltipTriggers.forEach(trigger => { trigger.addEventListener('click', (e) => { e.preventDefault(); if (window.innerWidth < 768) { const tooltipId = trigger.getAttribute('aria-describedby'); if (!tooltipId) return; const tooltip = document.getElementById(tooltipId); if (!tooltip) return; const isExpanded = trigger.getAttribute('aria-expanded') === 'true'; toggleTooltip(trigger, !isExpanded); } }); }); // Click outside to close tooltip document.addEventListener('click', (e) => { const isTooltip = e.target.closest('.has-tooltip') || e.target.closest('.tooltip'); if (!isTooltip && activeTooltip) { const trigger = document.querySelector(`[aria-describedby="${activeTooltip.id}"]`); if (trigger) { toggleTooltip(trigger, false); } } }); // Close tooltip with Escape key document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && activeTooltip) { const trigger = document.querySelector(`[aria-describedby="${activeTooltip.id}"]`); if (trigger) { toggleTooltip(trigger, false); trigger.focus(); } } }); // Resize handler to position tooltip correctly window.addEventListener('resize', () => { if (activeTooltip) { const trigger = document.querySelector(`[aria-describedby="${activeTooltip.id}"]`); if (trigger) { positionTooltip(trigger, activeTooltip); } } }); }); </script> </body> </html> - Initial Deployment

f25d1bf verified 5 months ago