Tooltip met volledige functionaliteit in Webflow

Introductie

De Wambay <span class="tooltip" data-tooltip-wambay="tooltip">Tooltip</span> is een uitgebreide oplossing ontwikkeld door Johan om de beperkingen van bestaande tooltip-oplossingen voor Webflow aan te pakken. Deze tooltip onderscheidt zich door de volgende kenmerken:

• Selecteert automatisch de juiste richting voor het openen zonder hard te coderen.
• Ondersteunt verschillende soorten inhoud, waaronder links, afbeeldingen en meer.
• Kan aan verschillende elementen worden gekoppeld, zoals blokken, afbeeldingen, tekst en inline-tekst.
• Blijft zichtbaar wanneer de muisaanwijzer wordt geplaatst om interactie met links erin mogelijk te maken.
• Functioneert naadloos binnen blogs en andere collectiepagina's.

‍

Onderzoek

Voordat deze oplossing werd ontwikkeld, werd een grondig onderzoek uitgevoerd naar bestaande alternatieven. Deze zijn onderverdeeld in twee groepen: native Webflow-oplossingen en bibliotheken van derden. De beperkingen van elk ervan worden hieronder beschreven:

Native webflow

Native Webflow-oplossingen maken doorgaans gebruik van dropdowns of aangepaste interacties om tooltips weer te geven en te verbergen. Deze methoden hebben belangrijke nadelen:

• Ze hebben hardgecodeerde tooltip-aanwijzingen nodig, waardoor ze beperkt kunnen worden aangepast aan verschillende schermformaten, vooral op mobiele apparaten waar tooltips buiten het scherm kunnen worden geklikt.
• Ze beperken waar tooltips kunnen worden bijgevoegd, waardoor het onmogelijk is om een woord in een zin in een dropdown te plaatsen zonder aangepaste code, waardoor tooltips beperkt blijven tot knoppen en divs.

Bibliotheken van derden

Bibliotheken van derden bieden vaak alleen basisfuncties voor tooltips, waaronder:

• Eenvoudige tooltip-creatie zonder uitgebreide aanpassingsmogelijkheden.
• Beperkte ondersteuning voor rich text of complexe aangepaste tooltips.
• Afhankelijkheid van het typen van inhoud op één regel binnen gegevensattributen, waardoor de flexibiliteit afneemt.

Aan de slag

Volg deze stappen om de Wambay Tooltip te implementeren:

1. Het project klonen: Begin met het klonen van de opslagplaats voor projecten.
2. Ontdek de installatie: Maak uzelf vertrouwd met de bekabeling van het tooltip-systeem.
3. Extraheer wat je nodig hebt: Bepaal of u het hele systeem nodig hebt of alleen specifieke componenten voor eenvoudige RTF-tooltips.

Componenten

Voor eenvoudige rich text tooltips heb je slechts twee componenten nodig:

• tooltips over: Activeert de tooltip-functie voor de pagina.
• tooltip: Heeft twee eigenschappen, id en rijke tekst.

Om een tooltip weer te geven, voegt u het attribuut toe data-tooltip-wambay="id” naar het gewenste element.

Werken in collecties

Om de tooltip binnen verzamelingen te gebruiken:

1. Kloon het project en bekijk het voorbeeld van de blogpost.
2. Maak een verzameling met meerdere referenties voor tooltips.
3. Voeg de tooltip-component toe aan een collectielijst.
4. Gebruik de rich text-add-on van Finsweet om het genereren van DOM-elementen mogelijk te maken.

‍

Neem voor hulp contact op met Johan via johan@wambay.com.