Od autora: Zdravo. Objašnjenje je mali tekst objašnjenja koji se pojavljuje kada pređete mišem preko elementa, obično slike. Danas ćemo pogledati kako možete napraviti tooltip u HTML-u na različite načine.

Standardni savjet

Podrazumevano, atribut title je odgovoran za prikazivanje teksta objašnjenja. Može se koristiti za različite elemente, ali se obično koristi samo za slike kako bi se objasnilo ono što prikazuju.

U jednom od prethodnih članaka koristio sam sliku tigra da pokažem rad sa veličinama slika. Ako nemate ništa protiv, ponovo ću koristiti ovu sliku. Dakle, da biste prikazali nagovještaj, potrebno je samo dodati atribut title i u njega napisati željeni tekst.

< img src = "tiger.jpg" title = "Ovo je tigar" >

Može biti jedna riječ ili nekoliko rečenica. A ovako to izgleda:

Nagoveštaj se pojavljuje glatko, ne odmah nakon lebdenja, već nakon nekog vremena. Ovo je zadano ponašanje.

Glavni problem s takvim opisom alata je taj što se ne može stilizirati. Kako riješiti ovaj problem? Morat ćemo dati nagovještaj na druge načine. Sada ću ti pokazati par.

Čista css metoda

Vrlo zanimljiv način koji vam omogućava da lijepo prikažete nagovještaj za sliku. HTML označavanje je jednostavno, samo sliku treba staviti u blok kontejner, kojem ćemo dodijeliti identifikator kako bismo je kasnije mogli referirati u stilovima:

< div id = "tiger" data - name = "sumatranski tigar"> < img src = "tiger.jpg" > < / div >

Jedina stvar koja vam ovdje može biti nejasna je atribut naziv-podataka. Stvar je u tome što je ovo takozvani data atribut koji ne radi ništa sam po sebi, ali se njegova vrijednost može koristiti u css-u i javascript-u, što ga čini korisnim u nekim slučajevima. Vidjet ćete ovo sljedeće.

Dakle, prvo, hajde da opišemo stilove za kontejner. Relativno pozicioniranje nam je potrebno jer ćemo apsolutno pozicionirati blok s tekstom objašnjenja tako da se pozicioniranje odvija u odnosu na roditeljski blok, a ne na cijelu stranicu.

#tiger( pozicija: relativna; prikaz: inline-block; )

#tigar( položaj: relativan; displej: inline - blok;

Prikaz blok-linije će spriječiti da se blok (a sa njim i blok sa opisom alata koji ćemo kreirati) proteže po cijeloj širini prozora. Ostaje samo da kreirate sam nagoveštaj. U CSS-u je vrlo zgodno to učiniti koristeći pseudoelemente. Volim ovo:

#tiger:hover:after ( sadržaj: attr(ime-podataka); pozicija: apsolutna; lijevo: 0; dolje: 0; pozadina: rgba(5,13,156,.55); boja: #fff; poravnanje teksta: centar ; font-family: cursive; font-size: 14px; padding: 3px 0; širina: 100%; )

#tiger:hover:after ( sadržaj: attr (podaci - naziv); pozicija: apsolutna; lijevo: 0; dno: 0; pozadina: rgba(5, 13, 156, . 55); boja : #fff; tekst - poravnaj : centar ; font - familija : cursive ; veličina fonta: 14px; padding: 3px 0; širina: 100%;

Koda ima puno, ali ovdje nema ništa komplikovano. Selektor #tiger:hover:after znači sljedeće: kada pređemo mišem preko bloka sa slikom, trebamo kreirati pseudoelement poslije (i tada su pravila navedena u vitičastim zagradama). Svojstvo content: attr(ime-podataka) postavlja tekstualnu vrijednost bloka. Biće jednako onome što je zapisano u atributu imena-podataka bloka omotača slike.

Ovaj tooltip se pojavljuje kada pređete mišem preko slike, ali za razliku od standardnog, to radi naglo, a sam izgled se javlja odmah u trenutku lebdenja. U ovom slučaju, neće biti moguće implementirati glatki prijelaz, jer glatki prijelazi nisu podržani za pseudoelemente.

Metoda 2. Čisti css i glatki izgled

Međutim, poprilično prepisivanjem koda, možete postići gladak izgled tooltip, i opet, bez upotrebe javascripta.

Da biste se sami uvjerili u 2 efekta koja ću vam sljedeće pokazati, preporučujem da otvorite Notepad ili bilo koji zgodan uređivač koda i sve ponovite za mnom. Istina, za ovo i dalje morate uključiti datoteku stila, iako se stilovi također mogu pisati u html-u u oznakama

Sadržaj opisa alata je uklonjen iz prikaza korištenjem negativnog svojstva margin-left umjesto prikaza: ništa ili vidljivost: skriveno jer neki čitači ekrana zanemaruju ova svojstva.

CSS stilovi za opise alata

Uskoro ćemo učiniti da opisi alata rade na isti način u različitim pretraživačima. Sada dodajmo nekoliko redova CSS koda.

Dodavanjem sljedećeg dijela koda prikazat ćemo savjete na ekranu, iako će izgledati banalno i teško ih je vizualno odvojiti od ostatka teksta.

CSS za prikaz tooltip-a

.tooltip:hover span (familija fontova: Calibri, Tahoma, Geneva, sans-serif; pozicija: apsolutna; lijevo: 1em; vrh: 2em; z-indeks: 99; margin-left: 0; širina: 250px; ) . tooltip:hover img ( granica: 0; margina: -10px 0 0 -55px; float: lijevo; pozicija: apsolutna; ) .tooltip:hover em ( font-family: Candara, Tahoma, Geneva, sans-serif; font-size : 1,2em; težina fonta: podebljano; prikaz: blok; padding: 0,2em 0 0,6em 0; ) .classic (odmak: 0,8em 1em; ) .prilagođeni (odmak: 0,5em 0,8em 0,8em 2em; ) *html a:hover (pozadina: transparentna;)

Potreba za *html stringom

Možda se pitate zašto je zadnji red u gornjem kodu uključen? Postavlja transparentnost za pozadinu veze. Dok sam testirao opise alata, otkrio sam čudan efekat u IE6 koji se nije mogao ukloniti sve dok postoji pozadina veze!

Gornji kod osigurava funkcionalnost opisa alata. Prikazuju se na ekranu, ali ih je prilično teško odvojiti od opšteg teksta. Ne postoje šeme boja koje čine da se tekst opisa alata ističe na stranici.

Postavite shemu boja za opise alata/

Sljedeći kod postavlja shemu boja za svaki od pet stilova opisa alata.

Nakon promjene koda stranice i ažuriranja u pretraživaču, opisi alata će se pojaviti kada pređete mišem preko linka gotovo isti u svim pretraživačima.

CSS kod za šemu boja

.classic (pozadina: #FFFFAA; granica: 1px čvrsta #FFAD33; ) .kritična (pozadina: #FFCCAA; granica: 1px čvrsta #FF3334; ) .pomoć (pozadina: #9FDAEE; granica: 1px čvrsta #2BB0D7; ) .info (pozadina: #9FDAEE; granica: 1px čvrsta #2BB0D7; ) .upozorenje (pozadina: #FFFFAA; granica: 1px čvrsta #FFAD33; )

CSS kod je vrlo jednostavan, ali daje sjajan izgled opisima alata i svuda radi svoj posao. Šema boja se može mijenjati po vlastitom nahođenju.

Nekoliko dodira CSS3 za napredni prikaz opisa

Prije nego što završimo ovaj vodič, dodaćemo nekoliko redova CSS3 koda kako bismo dodali vizualne efekte našim opisima alata. Postavimo zaobljene uglove pomoću svojstva border-radius i dodajmo neku dimenziju pomoću svojstva box-shadow.

Budući da nijedno od ovih svojstava nije podržano globalno, radit će samo u nekim od najnovijih verzija pretraživača. Ali tamo gdje rade, opisi će izgledati elegantno i seksi!

Dodajmo donji kod u selector.tooltip:hover raspon i osvježimo stranicu.

Vizuelni efekti za obrub, senku i transparentnost podižu opis alata iznad teksta stranice i čine informacije kontrastnim i lakim za čitanje.

Možda ćete primijetiti da se ne koriste samo zvanična svojstva CSS3, već i proširenja za Mozilla-u i WebKit.

Dodatna CSS svojstva za nove pretraživače

border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

Sažetak

Ovaj vodič pokazuje da poboljšanje interfejsa ne zahteva mnogo truda. Osim toga, vrijedi razmotriti iskustvo korištenja CSS-a, koje može biti korisno u postavljanju novog nivoa interaktivnosti za web aplikaciju.