Lépésenkénti útmutató a tiszta CSS-tippek készítéséhez

Nemrég dolgoztam ki egy rövid bemutatót arról, hogyan készítsünk egyszerű tippeket tiszta CSS (és további HTML elem vagy JavaScript nélkül) létrehozásáról. Később ezt a technikát használtam a saját projektemben, és néhány trükköt kitaláltam, hogy javítsak rajta.

Ez a cikk lépésről-lépésre bemutató útmutató, amely segít megérteni ezeket a CSS-trükköket, így tiszta CSS-tippeket is készíthet.

A bejegyzés végére megtudhatja, hogyan adhat hozzá egy tippet bármely elemhez egy egyszerű attribútum hozzáadásával.

A probléma

Létre kellett hoznom egy egyedi tippet a projektemhez.

A „CSS Tooltip Generator” keresésével kezdtem a Google-on. Találtam jó néhány generátort. Megközelítésük szerint abszolút pozícióval rendelkező tartományt adtak hozzá az elemen belül, amelyhez az eszköztippet szeretnék.

De volt már egy egyébként befejezett projektem. Nem akartam visszamenni és hozzáadni ezeket a span elemeket a projektem során. Ez időbe telik, és megnehezíti a HTML-t. Jobb útnak kellett lennie.

Végül találtam egy csodálatos oktatóanyagot a YouTube-on az eszköztippekről. Az okos trükk az volt, hogy eszköztippet készített a :: beforeés a :: afterCSS választókkal. A videót itt tekintheti meg.

Ez a trükk okos és tiszta volt, de nem volt elég általános.

A megoldás javítása

Ebben a részben általánosabbá teszem ezt a trükköt, és többet megtudunk néhány CSS-tulajdonságról. Végül a következőket akarjuk megtenni:

 click here !! 

Nem csak ez, hanem azt is szeretnénk, hogy könnyen meghatározhassuk az eszköztipp pozícióját:

 click here !! 

Először - amint a videóban említettük - egy beforeés egy afterál elemet adunk a gombhoz.

::afterés ::beforeál-elemek, amelyek lehetővé teszik, hogy tartalmat illesszen be egy oldalra a CSS-ből az elem tartalma előtt vagy után. Így működnek:

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

Az eredmény így néz ki:

 before after 

Menjünk át lépésről lépésre

1. lépés: hozzáadunk egy ehhez hasonló tooltip attribútumot:

 click Me !!  

Szükségünk van ::afterés ::beforeálelemekre. Ez egy egyszerű téglalap lesz az eszköztipp tartalmával. Egy egyszerű téglalapot hozunk létre CSS-sel, ha hozzáadunk egy szegélyt egy üres elem körül, amelyet a contenttulajdonsággal hozunk létre .

Az ::beforeál-elem az eszköztipp tartalmának megjelenítésére szolgál. Hozzáadjuk a tulajdonsághoz, contentés kivonjuk a tooltip attribútum értékét. A tartalom értéke lehet karakterlánc, egy attribútumérték az elemtől, például a példánk, vagy akár egy kép is url(path/image.png).

Ahhoz, hogy ez működjön, a gombelem helyzetének relatívnak kell lennie. Más szavakkal, a gombon belüli összes elem helyzete magának a gombelemnek a helyzetéhez viszonyítva.

Hozzáadunk néhány helyzettrükköt is, hogy az eszköztipp középre kerüljön a transzformációs tulajdonsággal és ez az eredmény.

Itt van a CSS:

2. lépés: Csak játszunk az ::beforeés ::afterál-elemekkel, hogy létrehozzunk egy eszköztipp pozíciót. A HTML gombunk így fog kinézni:

 click here !! 

Az eszköztipp-pozíció lehet: jobb, bal, felső vagy alsó.

3. lépés : ebben az utolsó lépésben hozzáadunk egy egyszerű lebegő animációt az eszköztipphez.

Ez a CodePen megmutatja a végeredményt (és a végleges kód megtekintéséhez átkattinthat):

Ha ismeri a React-et, ellenőrizze a Bejegyzésemet:

Bemutatjuk a reakció-felugró ablakot? - Modálok, tippek és menük - egyben

T ő a cikk arról szól, hogy egy egyszerű áttekintést, hogy mit lehet csinálni reactjs-felbukkanó, és hogyan kell használni effectively.h ackernoon.com

Köszönöm, hogy elolvasta! Ha úgy gondolja, hogy másoknak el kellene olvasniuk ezt, nyomja meg a? gombra, tweetelhet és megoszthatja a bejegyzést. Ne felejtsen el követni a Mediumon, hogy értesítést kapjon a jövőbeni bejegyzéseimről.

További történetek //elazizi.com/