Nogle gange har et design brug for en kort forklaring uden at give det en fuld linje på siden. Det er et værktøjstips job: en lille boble, der vises på hover, siger sit stykke og kommer af vejen. Den Værktøjstip widget i Master Addons til Elementor vedhæfter den boble til et ikon, et stykke tekst eller et billede med kontrol over placering, animation, udløser og styling.
Denne guide går gennem widgetten fra første træk til et stylet værktøjstip på live-siden.
Hvad Tooltip widget gør #
Widgetten placerer et lille målemelement på din side, et ikon, en tekst eller et billede og binder en værktøjstipboble til den. Når besøgende holder markøren eller klikker på målet, vises boblen med din besked. Placering, animation, timing og forskydninger kan alle konfigureres, og fanen Stil dækker både målet og boblen.
Dette er en selvstændig widget: målet og dets værktøjstip er hele punktet. Hvis du vil tilføje værktøjstip til widgets, du allerede har på siden, sender Master Addons også en Tooltip-udvidelse, der knytter sig til ethvert Elementor-element. Widgetten er det rigtige valg, når værktøjstipsmålet er sit eget lille designelement, som et infoikon ved siden af en pris eller en teamavatar med en navneboble.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
- Værktøjstip-widgetten aktiveret i indstillingspanelet Master Addons under Grundlæggende widgets.
Sådan tilføjes Tooltip-widget #
I Elementor-editoren skal du søge i Elementer panel til Værktøjstip og træk widgeten over på din side. Den indlæses med et infoikon som standardmål og et pladsholderværktøjstip, der allerede er tilsluttet, så hvis du holder ikonet på lærredet, vises boblen med det samme.
Vælg indholdstypen: ikon, tekst eller billede #
Open Indstillinger for indhold i fanen Indhold. Den Indholdstype switcher øverst tilbyder tre mål:
- Ikon: vælg et hvilket som helst ikon fra Elementor-biblioteket. Den klassiske infocirkel er standard.
- Tekst: skriv et ord eller en sætning, som “Hover Me!”, og værktøjstippet knytter sig til det.
- Billede: vælg et billede fra mediebiblioteket, nyttigt til avatarer og produktminiaturer.
To kontroller gælder for hver type. Justering placerer målet til venstre, i midten eller til højre. HTML Tag ombryder målet i den markup, du vælger: H1 til H6, div, span, p, knap eller a. Stick med p eller span for almindelige værktøjstip; brug knappen, når målet skal fungere som en kontrol for tilgængelighed.
Med Text valgt, erstatter et Indholdsfelt ikonvælgeren:
Med Image valgt, mediebiblioteket åbnes, og det valgte billede bliver svævemålet:
Skriv værktøjstippet og indstil dets adfærd #
The Værktøjstip muligheder sektion styrer selve boblen.
- Værktøjstip Tekst: meddelelsen inde i boblen. Hold den på en linje eller to; værktøjstip er til hints, ikke afsnit.
- Følg markør: lad boblen følge musen i stedet for at forblive fastgjort til målet.
- Placering: hvor boblen sidder i forhold til målet. Top er standard, med Top Start, Bottom og de andre tilgængelige kanter.
- Animation: hvordan boblen kommer ind, Shift-Away som standard.
- Udløser på: Hover viser boblen ved mouseover; Klik venter på et tryk, som også fungerer bedre på berøringsskærme.
- Varighed og Forsinkelse: animationshastighed og hvor længe boblen dvæler efter markøren forlader, begge 300 millisekunder som standard. Standardindstillingerne føles rigtige for de fleste sider; kun bremse dem ned, hvis værktøjstippet bærer noget besøgende har brug for et beat længere at læse.
The X Offset og Y Offset skydere skubber boblen væk fra dens standardplet. Nyttigt, når værktøjstippet skal rydde en kant eller sidde ved siden af et mærkeligt formet mål.
Stil målet #
I Style faneblad, Generelle stilarter dækker målementet på siden.
- Indholdsbredde og polstring: målblokkens størrelse. Demoen udvider den fra 150 til 215 pixels for at give avatarrummet.
- Normal og Hover stater: Baggrundsfarve, tekstfarve, boksskygge og typografi for hver tilstand.
- Border Type og Border Radius: indram målet; en radius på 4 pixel holder hjørnerne bløde.
Style værktøjstipboblen #
The Værktøjstip Styles sektion styler boblen, og lærredet forhåndsviser den live, mens du arbejder.
- Værktøjstipsbredde: boblens maksimale bredde, 200 pixels som standard. Tekst ombrydes inde i den.
- Baggrundsfarve og tekstfarve: demoen går mørk navy med hvid tekst, det klassiske højkontrast værktøjstip look.
- Typografi, Polstring, Border: boblens tekst og ramme.
- Afstand: afstanden mellem boble og mål, 10 pixels som standard.
- Tekstjustering og Box Shadow: de sidste berøringer. En blød skygge hjælper boblen med at læse som svævende over siden.
Resultatet på siden #
På live-siden sidder målet stille, indtil en besøgende svæver det. Derefter animerer boblen ind på din valgte placering, holder, mens markøren bliver, og forsvinder efter den forsinkelse, du har indstillet.
Almindelige brugstilfælde #
- Info ikoner udover prisrækker, formularetiketter og funktionslister.
- Teamavatarer der afslører et navn og en rolle på hover.
- Ordlistevilkår i tekst, med en kort definition i boblen.
- Produktminiaturer med en spec eller note, der ikke fortjener sideplads.
- Kun ikonknapper hvor værktøjstippet navngiver handlingen.
Tips til bedre værktøjstip #
- Hold teksten kort. En eller to linjer. Hvis meddelelsen har brug for mere, hører den hjemme i layoutet, ikke et værktøjstip.
- Brug Klik på udløser for berøringsbesøgende. Hover findes ikke på telefoner; et klikudløst værktøjstip fungerer overalt.
- Pas på kontrasten. Mørk boble, lys tekst eller omvendt. Standardbredden på 200 pixels med 10 polstring læser godt ved typiske skriftstørrelser.
- Kontroller placering nær skærmkanter. Et Top-værktøjstip på det første element på en side kan klippe; skift den til Bottom eller brug forskydningerne.
- Skjul ikke kritisk info i værktøjstip. Alt, hvad besøgende skal læse, hører hjemme på siden; boblen er til ekstramateriale.
Video Tutorial #
Hvis du hellere vil se værktøjstippet i aktion, dækker denne korte video hele opsætningen, fra at trække widgetten ind til den stylede boble på livesiden.
Ofte stillede spørgsmål #
Hvad er Tooltip widget i Master Addons?
Det er en Elementor widget, der placerer et ikon, tekst eller billede på siden og vedhæfter en værktøjstip boble til det. Boblen vises på hover eller klik, og du styrer dens placering, animation, timing, forskydninger, og fuld styling fra Elementor panel.
Kan værktøjstipsmålet være et billede?
Ja. Indstil indholdstype til billede i Indholdsindstillinger, og vælg et hvilket som helst billede fra mediebiblioteket. Værktøjstippet vises derefter, når besøgende holder markøren eller klikker på billedet, hvilket passer til teamavatarer og produktminiaturer.
Kan jeg vise værktøjstippet ved klik i stedet for at holde markøren?
Ja. I Tooltip Options skal du ændre Trigger on fra Hover til Click. Klik på triggering opfører sig også bedre på telefoner og tablets, hvor hover ikke findes.
Hvordan ændrer jeg, hvor værktøjstippet vises?
Brug dropdownen Placering i Værktøjstipindstillinger til at vælge Top, Bund eller en start- eller slutvariant af hver kant. Skyderne X Offset og Y Offset finjusterer derefter den nøjagtige position, og Afstand indstiller mellemrummet fra målet.
Kan jeg style værktøjstip-boblen?
Ja. Afsnittet Tooltip Styles i fanen Style styrer boblens bredde, baggrundsfarve, tekstfarve, typografi, udfyldning, kant, afstand fra målet, tekstjustering og boksskygge. Editoren forhåndsviser ændringer live.
Indpakning #
Widgetten Tooltip håndterer hele hint-boble-mønsteret på ét sted: Vælg et ikon, en tekst eller et billedmål, skriv beskeden, indstil udløseren og placeringen, og stil begge halvdele fra Elementor-panelet. Gennemse det fulde sæt af Master Addons widgets og udvidelser for Tooltip-udvidelsen og alt andet i kassen, og se prissætning side for hvad Pro tilføjer.
