Tilbake til bloggen

Hvordan legge til enkle verktøytips i Webflow

Legg til verktøytips til nettstedet ditt på sekunder med Tippy.js-biblioteket

Oversikt 📚

Lær hvordan du legger til vakre verktøytips til Webflow-prosjektene dine ved å bruke tippy.js-biblioteket .

Dette er en mye mer skalerbar, effektiv og lett løsning sammenlignet med å bruke interaksjoner for å administrere verktøytipsene dine.

Denne løsningen er tilgjengelig i noen få formater via Webflow-fellesskapsmedlemmer, hvis du vil ha en annen tilnærming, kan du bla gjennom arbeidet fra Noah Raskin


For å legge til dette i prosjektet ditt, følg de enkle trinnene og legg til den tilpassede koden i prosjektet eller sideinnstillingene.

{{ Template "gist" "text:Before </body> tag" "id:a14e3804072cb7e88a16b6d3b89b0ce8" }}

Instruksjoner ✍️

1. Legg til et element på siden din som brukerne kan holde musepekeren og aktivere verktøytips på.

Tippy vil fungere på alle elementer og kan bruke enten attributter eller skriptet for å kontrollere spesifikke funksjoner. Alt du trenger er skriptene som er inkludert i denne veiledningen, og å legge til klassen "tippy" på elementene dine.

Skriptet inkluderer våre standardinnstillinger for tippy-oppsettet ditt, du kan velge å redigere fra disse, eller bruke egendefinerte attributter for å oppnå unike verktøytips for forskjellige elementer. Her er noen av de mest populære egenskapene som brukes med Tippy, men du kan dykke dypere gjennom dokumentasjonen deres for alle funksjoner.


Attributter:

Innhold:
data-tippy-content = "Legg til meldingen din "

Plassering:
data-tippy-placement = "topp "

Animasjon:
data-tippy-animation = "skala "

Pil:
data
-tippy-arrow = "true"

2. Legg til de egendefinerte attributtene til elementet ditt

Naviger til innstillingene for dette elementet og legg til de egendefinerte attributtene du trenger. Som standard må du legge til attributtet:

data-tippy-content = "Melding her" det er her vi kan inkludere meldingen for å vise brukere når de peker.

3. Ta med de tilpassede skriptene og koden.

Be sure to add the custom script into your Before </body> tag custom code area.

{{ Template "gist" "text:Before </body> tag" "id:a14e3804072cb7e88a16b6d3b89b0ce8" }}
4. Legg til elementspesifikke verktøytips

Overskriv standardinnstillingene ved å legge til dine egne attributter til ethvert element.

5. Publiser og test

Siden disse verktøytipsene bruker tilpasset kode, må du publisere siden din for å se og teste. Noe som ikke fungerer? Sørg for å ha klassenavnet lagt til elementet, og sørg for at det samsvarer nøyaktig med skriptet.

ANDRE GUIDER OG LEKSJONER

Øk nettsted for nettstedsflyt ytterligere.

Bli med over 30 000
Skapere i dag

Bli med på vår nyhetsbrevliste for sporadiske oppdateringer, produkter og innsikt.

takk! Bidraget ditt er mottatt!
Oops! Noe gikk galt under innsending av skjemaet.
Bli med over 30 000 andre skapere på tvers av fellesskapene våre.