En trin-for-trin guide til oprettelse af pure-CSS værktøjstip

Jeg har for nylig arbejdet igennem en kort vejledning om oprettelse af enkle værktøjstip ved hjælp af ren CSS (og intet ekstra HTML-element eller JavaScript). Jeg brugte senere denne teknik i mit eget projekt og fandt ud af nogle tricks til at forbedre den.

Denne artikel er en trinvis vejledning, der hjælper dig med at forstå disse CSS-tricks, så du også kan lave pure-CSS-værktøjstip.

I slutningen af ​​dette indlæg ved du, hvordan du tilføjer en værktøjstip til ethvert element ved at tilføje en simpel attribut.

Problemet

Jeg havde brug for at oprette et tilpasset værktøjstip til mit projekt.

Jeg startede med at google "CSS Tooltip Generator." Jeg fandt en hel del generatorer. Deres tilgang var at tilføje et span med en absolut position inde i det element, du vil have et værktøjstip til.

Men jeg havde allerede et ellers komplet projekt. Jeg ønskede ikke at gå igennem og tilføje alle disse spanelementer i hele mit projekt. Dette vil tage tid og vil komplicere min HTML. Der måtte være en bedre måde.

Endelig fandt jeg en fantastisk tutorial på YouTube om værktøjstip. Det smarte trick, det brugte, var at oprette en værktøjstip ved hjælp af :: beforeog :: afterCSS-vælgerne. Du kan se videoen her.

Dette trick er var smart og rent, men det var ikke generisk nok.

Forbedring af løsningen

I denne del vil jeg gøre dette trick mere generisk, og vi finder ud af mere om nogle CSS-egenskaber. Her er hvad vi i sidste ende vil være i stand til at gøre:

 click here !! 

Ikke kun det, men vi vil gerne være i stand til at specificere værktøjstippositionen let:

 click here !! 

Først - som nævnt i videoen - tilføjer vi et beforeog et afterpseudo-element til knappen.

::afterog ::beforeer pseudo-elementer, som giver dig mulighed for at indsætte indhold på en side fra CSS før eller efter elementets indhold. De arbejder sådan:

div::after { content: “after”;}div::before { content: “before”;}

Resultatet ser sådan ud:

 before after 

Lad os gå gennem dette trin for trin

Trin 1: Vi tilføjer en attribut som værktøjstip som denne:

 click Me !!  

Vi har brug for ::afterog ::beforepseudo-elementer. Disse vil være et simpelt rektangel med indholdet af værktøjstip. Vi opretter et simpelt rektangel med CSS ved at tilføje en kant omkring et tomt element, som vi opretter med contentejendommen.

Den ::beforepseudo-element anvendes til at vise den tooltip indhold. Vi tilføjer det med egenskaben contentog udtrækker værktøjstipattributværdien. Værdien for indhold kan være en streng, en attributværdi fra elementet som vores eksempel eller endda et billede med url(path/image.png).

For at få dette til at fungere skal knapelementets position være relativ. Med andre ord er placeringen af ​​alle elementer inde i knappen i forhold til selve knapelementets position.

Vi tilføjer også nogle positionstricks for at gøre værktøjstip i midten med transform-egenskaben og dette resultatet.

Her er vores CSS:

Trin 2: vi leger bare med ::beforeog ::afterpseudo-elementerne for at skabe en værktøjstipposition. Vores HTML-knap vil se sådan ud:

 click here !! 

Værktøjstip-positionen kan være: højre, venstre, top eller bund.

trin 3 : i dette sidste trin vil vi tilføje en simpel svævende animation til værktøjstip.

Denne CodePen viser slutresultatet (og du kan klikke igennem for at se den endelige kode):

Hvis du er fortrolig med React, skal du kontrollere mit indlæg:

Introduktion til reactjs-popup? - Modeller, værktøjstip og menuer - alt sammen

Denne artikel handler om at give dig et simpelt overblik over, hvad du kan gøre med reactjs-popup, og hvordan du bruger det effektivt. H ackernoon.com

Tak for læsningen! Hvis du mener, at andre mennesker skal læse dette, skal du trykke på? knap, tweet og del indlægget. Husk at følge mig på Medium, så du kan få besked om mine fremtidige indlæg.

Læs flere historier //elazizi.com/