En trin-for-trin vejledning til at lave pure-CSS værktøjstip

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

Denne artikel er en trin-for-trin-tutorial, 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 var nødt til at oprette en brugerdefineret værktøjstip til mit projekt.

Jeg startede med Googling “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 en værktøjstip til.

Men jeg havde allerede et ellers komplet projekt. Jeg ønskede ikke at gå tilbage 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.

Til sidst 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 :: før og :: efter CSS-vælgere. 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 vil opdage mere om nogle CSS-egenskaber. Her er hvad vi i sidste ende vil være i stand til at gøre:

 klik her !! 

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

 klik her !! 

Først - som nævnt i videoen - tilføjer vi et før og et efter pseudo-element til knappen.

:: efter og :: før er pseudo-elementer, som giver dig mulighed for at indsætte indhold på en side fra CSS før eller efter indholdet af elementet. De fungerer sådan:

div :: efter {
 indhold: “efter”;
}
div :: før {
 indhold: “før”;
}

Resultatet ser sådan ud:

 Før    efter

Lad os gå gennem dette trin for trin

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

 klik på mig !! 

Vi har brug for :: efter og :: før pseudo-elementer. Disse vil være et simpelt rektangel med indholdet af værktøjstippen. Vi opretter et simpelt rektangel med CSS ved at tilføje en ramme omkring et tomt element, som vi opretter med indholdsejendommen.

:: før pseudo-elementet bruges til at vise indholdet af værktøjstip. Vi tilføjer det med egenskabsindholdet og udtrækker værktøjstip-attributværdien. Værdien for indhold kan være en streng, en attributværdi fra elementet som vores eksempel eller endda et billede med url (sti / image.png).

For at gøre dette arbejde skal knapelementets position være relativ. Med andre ord er placeringen af ​​alle elementer inde i knappen i forhold til selve knappen af ​​elementet.

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

Her er vores CSS:

Trin 2: vi spiller bare med :: før og :: efter pseudo-elementer for at skabe en værktøjstip position. Vores knap HTML vil se sådan ud:

 klik her !! 

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

trin 3: i dette sidste trin tilføjer vi en simpel hoveranimation til værktøjstipen.

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

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

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

Læs flere historier https://elazizi.com/