Sådan tilføjes Elementor Tooltip på Hover eller Klik?

Du har set værktøjstip overalt. Hold markøren over et værktøjslinjeikon i Google Docs, og en lille etiket fortæller dig, hvad den knap gør. Det er et værktøjstip. I WordPress lader værktøjstip dig tilføje korte hints, der vises, når nogen svæver over (eller klikker) et element på din side. Ingen ekstra side fast ejendom, ingen rodet layout.

Master Addons for Elementor giver dig to måder at tilføje værktøjstip på: Værktøjstip Element, en selvstændig widget du dropper på siden, og den Tooltip Extension, som vedhæfter et værktøjstip til enhver Elementor-widget, sektion eller beholder, der allerede findes. Denne vejledning dækker begge metoder, hvornår de skal bruges hver, og hvordan de skal styles.

Hvad er værktøjstip, og hvorfor betyder de noget?

Et værktøjstip er en kort besked, der vises, når en besøgende holder markøren over et bestemt element på din side. På WordPress-websteder tjener værktøjstip et par praktiske formål:

• Forklar termer uden at bryde flow. Hvis dit indhold bruger jargon, lader et værktøjstip læserne få en hurtig definition på hover uden at afbryde afsnittet.
• Tilføj kontekst til billeder og ikoner. Når du viser produktikoner, teammedlemsbilleder eller funktionsikoner, giver et værktøjstip ekstra detaljer uden at optage visuel plads.
• Hold siderne rene. I stedet for at proppe hvert stykke information ind i det synlige layout, skjuler værktøjstip sekundære detaljer, indtil læseren rent faktisk vil have dem.
• Forbedre engagement. Interaktive elementer som værktøjstip opfordrer besøgende til at udforske dit indhold. Sider, der inviterer til interaktion, har en tendens til at holde opmærksomheden længere.

Hvad du får brug for

• WordPress installeret på dit websted
• Master Addons til Elementor installeret og aktiveret. Den gratis version dækker Tooltip Element; Tooltip Extension har brug for Master Addons Pro.
• Elementor sidebygger (gratis eller Pro)

Master Addons er et WordPress plugin med 80+ widgets og udvidelser for Elementor, inklusive begge værktøjstip-funktioner, der er dækket her.

Tooltip Element vs. Tooltip Extension: hvilken skal du bruge?

De løser forskellige problemer. At vælge den rigtige sparer tid.

Den korte version:

• Har du brug for at tilføje et værktøjstip til en overskrift, knap eller en hvilken som helst widget, der allerede er på din side? Brug den Tooltip Extension.
• Har du brug for en dedikeret indholdsblok, hvor brugerne holder markøren over specifik tekst, billeder eller ikoner for at se indhold med værktøjstip? Brug den Værktøjstip Element.

Du kan bruge begge dele på samme side. De er ikke i konflikt med hinanden.

Metode 1: hvordan du tilføjer værktøjstip i Elementor ved hjælp af værktøjstipselementet

The Værktøjstip Element er en selvstændig widget. Du trækker den over på din side, og brugerne holder markøren over tekst, et billede eller et ikon for at afsløre en værktøjstipmeddelelse.

Brug dette, når du vil oprette billedværktøjstip, tekstværktøjstip eller ikonværktøjstip som en dedikeret sektion på din side.

Trin 1: åbne din side i Elementor

Fra dit WordPress dashboard skal du navigere til den side, du vil redigere, og klikke på Rediger med Elementor.

Trin 2: søg efter Tooltip widget

I Elementor widget panelet i venstre side skal du skrive “Værktøjstip” i søgelinjen. Den MA værktøjstip widget vises under afsnittet Mastertilføjelser. Træk den over på din side, hvor du vil have værktøjstippet vist.

Trin 3: vælg din indholdstype

Klik på widgetten for at åbne dens indstillinger. Under den Content fanen, den Indholdstype option giver dig tre valg:

• Text. Besøgende holder markøren over din tekst for at se værktøjstipmeddelelsen.
• Image. Besøgende holder markøren over et billede for at se værktøjstippet.
• Ikon. Besøgende holder markøren over et ikon for at afsløre yderligere oplysninger.

Vælg den indholdstype, der passer til din use case.

Trin 4: opsæt værktøjstipsindholdet

Når du har valgt din indholdstype, skal du konfigurere begge dele:

Udløserindholdet (hvad besøgende ser på siden):

• For tekst: indtast ordet eller sætningen, som besøgende vil holde markøren over
• Til billede: upload et billede fra dit WordPress Media Library
• For ikon: vælg et ikon fra ikonbiblioteket

Værktøjstipsindholdet (hvad der vises på hover):

• Gå til Værktøjstip Indstillinger section
• Indtast din værktøjstiptekst i den indbyggede editor
• Du kan formatere teksten med fed skrift, kursiv, links og meget mere

Trin 5: konfigurere værktøjstipsretning og hastighed

I Indstillinger for værktøjstip skal du angive, hvordan værktøjstippet vises:

• Værktøjstipsretning. Vælg, hvor værktøjstippet popper op i forhold til udløseren: Top, Bund, Venstre eller Højre.
• Værktøjstip Hastighed. Indstil animationshastigheden i millisekunder. Lavere værdier får den til at fremstå hurtigere.

Tip: Hold værktøjstiphastigheden mellem 300-500ms. For hurtigt føles brat, for langsomt føles ikke reagerende.

Trin 6: style dit værktøjstip

Skift til Style faneblad til at tilpasse udseendet af din Elementor værktøjstip widget:

• Indhold Max bredde. Styrer, hvor bred værktøjstipboksen kan blive.
• Baggrund Farve. Indstil værktøjstip-baggrunden.
• Tekst Farve. Skift skrifttypens farve på værktøjstip.
• Typografi. Juster skrifttypefamilie, størrelse, vægt og afstand.
• Box Shadow. Tilføj dybde med en skyggeeffekt.
• Border. Tilføj kanter og indstil grænseradius for afrundede hjørner.
• Polstring. Styr mellemrummet mellem tekst- og værktøjstipskanterne.

Du kan indstille forskellige stilarter for normal og hover stater til at tilføje visuel feedback.

Under de generelle stilarter, den Værktøjstip Styles sektion giver dig kontrol over selve boblen. Indstil værktøjstipbredden i pixels, vælg baggrunds- og tekstfarver, juster typografi, konfigurer udfyldning på alle fire sider, vælg en kanttype, indstil grænseradius for afrundede hjørner, kontroller afstanden mellem udløseren og boblen, juster tekst inde i værktøjstippet, og tilføj en boksskygge for dybde.

For en fuld gennemgang af hver indstilling, tjek Værktøjstip Element dokumentation eller se video tutorial.

Metode 2: hvordan du tilføjer værktøjstip til enhver Elementor-widget ved hjælp af Tooltip Extension

The Tooltip Extension fungerer anderledes end elementet. I stedet for at være en selvstændig widget, tilføjer den en Værktøjstip sektion til fanen Avanceret for hvert Elementor-element. Vælg en hvilken som helst widget, beholder, kolonne eller sektion, der allerede findes på din side, vend kontakten, skriv din tekst, og besøgende ser en lille boble, når de svæver over det element. Hvert element bærer sit eget værktøjstip, så tre kort i træk kan forklare sig med hver sin tekst.

Udvidelsen opdeles i to underfaner: Indstillinger for adfærd (tekst, placering, animation, trigger, timing) og Style for udseende (farver, bredde, polstring, typografi).

Trin 1: aktiver Tooltip Extension

Fra dit WordPress dashboard, gå til Master Addons og åbn Udvidelser fane. Værktøjstip sidder i Dynamiske widgets gruppe. Klik på dens toggle, så den bliver lilla, og hit derefter Gem ændringer øverst og vent på den grønne “Indstillinger gemt med succes”-meddelelse.

Trin 2: Åbn din side i Elementor

Naviger til den side, du vil redigere, og klik Rediger med Elementor.

Trin 3: vælg et hvilket som helst element

Klik på et hvilket som helst eksisterende element, hvor du vil tilføje et værktøjstip. Dette fungerer med overskrifter, knapper, billeder, ikoner, prissætningstabeller, containere, kolonner, sektioner og et hvilket som helst Elementor-widget eller Master Addons-element. Værktøjstip-sektionen vises på fanen Avanceret for hvert element.

Trin 4: gå til fanen Avanceret og aktiver værktøjstippet

Med dit element valgt, klik på Advanced faneblad i indstillingspanelet. Rul ned, indtil du finder Værktøjstip sektion med det lilla MA-badge. Udvid det og vend Værktøjstip skift til Ja. Underfanen Indstillinger åbnes først.

Trin 5: konfigurere værktøjstipindstillingerne

Underfanen Indstillinger giver dig kontrol over, hvordan værktøjstippet opfører sig:

• Indhold: værktøjstipteksten. Skriv den ind eller træk den fra et dynamisk mærke. Hvis dit websted har Elementor AI slået til, vises Elementors eget Skriv med AI-link også her.
• Placering: hvilken side af elementet boblen foretrækker: øverst (standard), nederst, venstre eller højre.
• Følg markør: gør værktøjstipsporet til musen i stedet for at sidde stille. Nyttigt til kort, diagrammer og diagrammer, hvor hvert område under markøren har brug for sin egen etiket.
• Animation: hvordan boblen kommer ind. Syv valg: Ingen, Fade, Shift-Away, Shift-Toward, Scale, Perspective og Fill Effect.
• Udløser: hvad åbner værktøjstippet. Hold markøren som standard, eller klik for berøringsskærmvenlige vedvarende hints.
• Varighed og Forsinkelse: animationshastigheden i millisekunder, og hvor længe boblen bliver hængende, før den lukkes.
• X og Y Offset: skub boblen væk fra dens standardplet med et bestemt antal pixels.
• Pil og pil Type: tilføj den lille pointer, der forbinder boble til element, med skarpe eller runde stilmuligheder.

Trin 6: style værktøjstippet

Skift til Style sub-fane for at få boblen til at matche dit design i stedet for at ligne en browserstandard.

• Max bredde: caps hvor bred boblen vokser så lang tekst wraps i stedet for at strække sig over skærmen.
• Tekst, baggrund og pilfarve: fuld farvekontrol, inklusive markøren.
• Polstring, Border Type og Border Radius: boblens form.
• Tekstjustering, Box Shadow og typografi: afslut looket med din egen skrifttype og dybde.

Trin 7: tjek resultatet

Gem og se siden. Hold markøren over elementet, og værktøjstippet toner ind med den tekst, du har skrevet, ved hjælp af den animation, farver og bredde, du har indstillet. Flyt markøren væk, og den lukkes efter forsinkelsen. Gentag for de andre elementer på siden.

For fuldstændige konfigurationsdetaljer, se Værktøjstip Udvidelsesdokumentation eller se video tutorial.

Praktiske use cases for hver metode

Hvornår skal du bruge Tooltip Element

Værktøjstipselementet er en dedikeret indholdsblok. Brug det, når værktøjstip er hovedpunktet i afsnittet:

• Feature showcase sider. Vis produktfunktioner som ikoner eller billeder med værktøjstipbeskrivelser.
• Ordliste afsnit. Opret en inline ordliste, hvor læserne holder markøren over termer for at se definitioner.
• Porteføljeposter. Tilføj billedværktøjstip til porteføljeminiaturebilleder, der viser projektdetaljer.
• Teamsider. Placer ikoner eller fotos med værktøjstipdetaljer om teamroller.
• Uddannelsesindhold. Lad eleverne holde markøren over søgeord for at se forklaringer uden at forlade siden.

Hvornår skal du bruge Tooltip Extension

Tooltip Extension tilføjer kontekst til elementer, der allerede findes på din side:

• Featurekort. En sætning med ekstra detaljer uden at forlænge kortet.
• Prisfastsættelsestabeller. Forklar, hvad “prioriteret støtte” faktisk dækker, lige der hvor folk undrer sig. Se vores Prissætning Tabel widget for mere.
• Knapper og ikoner. Etiket ikon-kun kontroller, så ingen gætter.
• Teammedlemmer. En sjov kendsgerning eller rolle note på hover over hvert billede.
• Tekniske termer. Korte definitioner på jargon, billigere end en ordliste side.

Kombination af begge metoder

Du kan bruge begge på samme side. Brug for eksempel værktøjstipselementet til at opbygge en funktionssammenligningssektion, hvor besøgende holder markøren over ikoner for at lære om hver funktion, og brug derefter værktøjstipudvidelsen på din CTA-knap nederst for at tilføje et værktøjstip “Gratis 14-dages prøveperiode, ingen kreditkort påkrævet”.

Der er ingen konflikt mellem de to. De tjener forskellige formål og kan eksistere side om side på enhver side.

Værktøjstips bedste praksis for WordPress

• Hold værktøjstiptekst kort. Sigt efter 1-2 sætninger. Hvis du har brug for mere end det, hører oplysningerne sandsynligvis hjemme på selve siden, ikke skjult i et værktøjstip.
• Brug ensartet positionering. Vælg én retning (øverst eller nederst fungerer bedst i de fleste tilfælde), og hold dig til den på tværs af dit websted. Blanding af positioner føles tilfældigt.
• Overbrug ikke værktøjstip. Hvis hvert element på din side har et værktøjstip, vil besøgende ikke gider at holde musen over nogen af dem. Brug dem, hvor de virkelig tilføjer værdi.
• Sørg for, at værktøjstip fungerer på mobilen. Hover findes ikke på berøringsskærme. Værktøjstipselementet og værktøjstipudvidelsen understøtter begge en klikudløser, som fungerer bedre for mobilbrugere. Test dine værktøjstip på en telefon, før du udgiver.
• Match dit websteds design. Tilpas værktøjstipfarver, skrifttyper og kanter, så de passer til dit eksisterende tema. Standardværktøjstipstyling kan se malplaceret ud på et poleret websted.

Tooltip Element vs. Tooltip Extension: hurtig sammenligning

Værktøjstipselementet leveres med den gratis Master Addons til Elementor plugin. Tooltip Extension er en del af Master Addons Pro.

Ofte stillede spørgsmål

Begynd at tilføje værktøjstip til dit WordPress-websted

Med Master Addons får du to muligheder: den Værktøjstip Element til oprettelse af dedikeret værktøjstipsindhold med tekst-, billed- og ikonudløsere og Tooltip Extension for at tilføje værktøjstip til ethvert eksisterende Elementor-element på din side.

Værktøjstipselementet fungerer med det gratis plugin, og Tooltip Extension har brug for Pro. Hvis du vil have værktøjstip fastgjort til bestemte steder på et billede, skal du se på Billede Hotspot widget (Pro).

Download Master Addons til Elementor at komme i gang.