Tooltip in tekst
Een tooltip ? Om te beginnen een klein woordje uitleg over wat een tooltip nu eigenlijk is. Een tooltip is een blokje informatie wat tevoorschijn komt, wanneer een gebruiker met zijn muis over een stukje tekst of een afbeelding gaat.
Ook in Elementor kan je gebruik maken van een tooltip. We gaan dit doen via een plugin, genaamd Master Addons for Elementor.
Ga in je dashboard van WordPress naar Plugins => Nieuwe Plugin
En typ in het zoekvenster : “master addons”.
De plugin “Master Addons for Elementor” komt nu tevoorschijn. Deze kan je installeren en daarna activeren.
Je komt daarna op een algemene informatiepagina terecht van de plugin.
We maken nu een nieuwe pagina of bericht en geven deze de naam “Tooltip” en klikken daarna op bewerken met Elementor.
Voeg een nieuwe sectie toe en kies voor 1 kolom.
Klik op het plusje in de kolom om een widget toe te voegen.
Typ nu links in het vak “Widget zoeken”, tooltip. De widget MA Tooltip komt dan tevoorschijn.
Sleep de widget naar de sectie.
Bij het tabblad INHOUD, Content Type kiezen we voor het icoontje “Text”. In het vak Content, typ je een woord of zin naar keuze.
Indien het woord of de zin te lang is, gaat de tekst over elkaar lopen. Dit kan je oplossen door In het tabblad “Stijl” bij “General Styles” de content width groter te maken.
Indien je een link wil plaatsen op dit woord of deze zin, kan je de knop “Show Link” aanzetten. In het vak “Link” kan je dan de url plaatsen, naarwaar de link moet leiden.
Klik daarna op “Tooltip Options”. In het vak “Tooltip text” kan je het zinnetje typen, wat tevoorschijn moet komen wanneer een gebruiker over het woordje hoovert.
Bij het volgende vakje “Direction”, kan je bepalen waar het tooltiptekstblok moet komen. Boven, onder, links of rechts.
Bij het tabblad “Stijl” kan je diverse wijzigingen doen aan de content die je hebt getypt. (Bij mij is dat “Wat is een tooltip?”) Hier kan je de kleur, het lettertype, de achtergrondkleur, de padding enz… wijzigen.
Bij tooltip styles kan je wijzigingen doen aan opmaak van de tooltip. In mijn geval dus de paarse tekstballon.
Je kan alles een keertje uittesten.
Tooltip toepassen op een afbeelding
We gaan nu hetzelfde doen, maar dan met een afbeelding.
Voeg een nieuwe sectie toe, 1 kolom en sleep de widget “MA Tooltip” naar de sectie.
Bij “Content Settings” kies je bij content Type voor icoontje 3, afbeeldingen.
Kies een afbeelding uit de mediabibliotheek of upload een afbeelding naar WordPress. Bij Tooltip Options, typ je in het vak “Tooltip Text”, de tekst die je wil laten verschijnen wanneer iemand met zijn muis over de afbeelding gaat.
Helaas kan je via deze plugin niet zomaar een woord als tooltip zetten in een tekst. Dit zal helaas moeten gebeuren door zelf html en css toe te voegen. Dit bespreek ik in toekomstige blog.
