Hoe een Tooltip toevoegen in Elementor?

Hoe een tooltip toevoegen aan Elementor

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.

Master Addons for Elementor toevoegen

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.

Nieuwe sectie toevoegen in Elmentor

Klik op het plusje in de kolom om een widget toe te voegen.

Widget toevoegen in Elementor

MA tooltip toevoegen aan sectie

Typ nu links in het vak “Widget zoeken”, tooltip. De widget MA Tooltip komt dan tevoorschijn.

Sleep de widget naar de sectie.

Tooltip tekst

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.

Tooltip lengte wijzigen

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.

Stijl tooltiptekst aanpassen

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.

Tooltip op afbeelding

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.

Facebook
Twitter
LinkedIn

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *


De verificatie periode van reCAPTCHA is verlopen. Laad de pagina opnieuw.

Recente artikels

Website maken met Wordpress?