Miten luoda yksinkertainen CSS3 Tooltip

Työkaluvinkit ovat erinomainen tapa näyttää käyttäjällesi lisätietoja liikkumalla vain kuvan tai tekstin päälle. Niitä voidaan käyttää esimerkiksi kuvausten kuvaamiseen tai linkkien pitkään kuvauksiin tai hyödyllisiin tietoihin, jotka parantaisivat sivustosi käyttökokemusta, eivätkä tunkeutuisi suunnitteluun.

Tänään aion näyttää, kuinka voit luoda yksinkertaisen työkalupalkin HTML- ja CSS-työkaluilla hyperlinkkien otsikkotunnisteen näyttämiseksi.

Aloita luomalla yksinkertainen merkintä linkille. Meidän on annettava sille otsikko, joka on työkalupalkin sisältö ja määritä se luokaksi:

CSS3 Tooltip

Seuraava askel on luoda joitain alkeellisia muotoiluja työkalu-luokallemme:

.tooltip{display: inline;position: relative;}

Nyt esittelemme työkalupaketti linkin kanssa linkin avulla suhteellisen paikannuksen avulla. Seuraavaksi haluamme luoda pyöreän laatikon työkalupalkin muodostamiseksi ja sijoittaa se niin, että se kelluu linkin yläpuolella:

.tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: attr(title);left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;}

Käytämme: hover-valitsinta, joka valitsee elementin, tässä tapauksessa linkkisi, hiiren osoittimen ja valitsimen jälkeen, joka lisää sisällön valitun elementin jälkeen. Olemme määrittäneet mustan taustan 80%: n läpikuultamattomuudella ja selaimille, jotka eivät tue RGBA-värejä, olemme toimittaneet tumman harmaan taustan.

Hieman pyöristettyjä kulmia luodaan raja-säde -määritteen avulla ja olemme määrittäneet tekstin värin valkoiseksi. Lopuksi olemme asettaneet työkalupakki linkin vasemmalta puolelta ja lisäsimme hieman pehmusteita.

Sen lisäksi, että olemme muotoilussa ja paikannuksessa, olemme määrittäneet sisällön ominaisuuden:

content: attr(title);

Tämän ominaisuuden avulla voimme lisätä haluamamme sisällön, joka voi olla merkkijono, media-tiedosto tai elementin attribuutti. Tässä tapauksessa käytämme linkin otsikkomääritettä.

Nyt, kun siirrät hiiren linkin päälle, työkalupisteen pitäisi näkyä sen yläpuolella linkin otsikon kanssa. Meillä on kuitenkin yksi ongelma, mutta otsikkotieto näytetään kahdesti: kerran työkalupalkissa ja kerran selaimessa. Tämän korjaamiseksi meidän on tehtävä pieni muutos HTML: ään:

CSS3 Tooltip 

Se, mitä olemme tehneet tässä, on kääri linkkiteksti span-tagilla, jolla on oma otsikkomääritelmä. Nyt selaimessa näkyy span-tunnisteen otsikko, kun linkki liikkuu.

Lopuksi lisäämme nuolen työkalupalkin alaosaan, jotta se antaisi sille hieman ylimääräistä tyyliä. Teemme tämän käyttämällä: ennen valitsinta ja joitain rajatyylejä:

.tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 50%;position: absolute;z-index: 99;}

Käytämme tässä muutamia rajahaasteita luomalla nuolen vaikutus: raja-arvojen asetus vasemmalle ja oikealle läpinäkyvälle ja rajan leveyden säätämiseksi. Olemme myös asettaneet nuolen siten, että se istuu työkalupalkin alaosassa.

Ja siellä on se, yksinkertainen työkalupakki, jonka otsikkotunniste elementti leijui. Voit myös käyttää tätä kuva-alt-tunnisteita tai jopa laittaa oman tekstisi CSS-sivulle ponnahtaa sinne missä haluat.

Voit tarkastella a työdemossa täällä .

Miten voit rakentaa työkaluvintaa? Oletko käyttänyt tätä tekniikkaa sivustolla? Kerro meille kommentit.

Esitetty kuva / pikkukuva, vihje kuva kautta Shutterstock.