Od autora: Zdravo. Alat je mali tekst s objašnjenjem koji se pojavljuje kada zadržite pokazivač iznad elementa, obično slike. Danas ćemo vidjeti kako možete napraviti tooltip u html-u na različite načine.
Standardni upit
Prema zadanim postavkama, atribut title odgovoran je za prikaz teksta objašnjenja. Može se naznačiti raznim elementima, ali se obično koristi samo za slike kako bi se objasnilo što je na njima prikazano.
U jednom od prošlih članaka koristio sam sliku tigra da pokažem kako raditi s dimenzijama slike. Ako nemate ništa protiv, opet ću upotrijebiti ovu sliku. Dakle, da biste prikazali opis alata, samo trebate dodati atribut title i u njega upisati traženi tekst.
< img src = "tiger.jpg" title = "Ovo je tigar" > |
Može biti jedna riječ ili nekoliko rečenica. A ovako to izgleda:
Alat 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? Nagovještaj ćemo morati izvesti na druge načine. Sada ću vam pokazati par.
Čista css metoda
Vrlo zanimljiv način koji vam omogućuje da lijepo prikažete nagovještaj za sliku. HTML oznaka je jednostavna, samo je sliku potrebno zatvoriti u blok spremnika, na koji ćemo objesiti identifikator kako bismo je kasnije referirali u stilovima:
< div id = "tiger" data - name = "sumatranski tigar"> < img src = "tiger.jpg" > < / div > |
Samo vam atribut naziv-podataka može biti nerazumljiv. Činjenica je da je to takozvani data atribut, koji sam po sebi ništa ne radi, ali se njegova vrijednost može koristiti u css-u i javascriptu, što ga čini korisnim u nekim slučajevima. Vidjet ćete ovo sljedeće.
Dakle, prvo, opišimo stilove za spremnik. Potrebno nam je relativno pozicioniranje jer ćemo apsolutno pozicionirati blok s tekstom objašnjenja tako da se pozicioniranje dogodi u odnosu na roditeljski blok, a ne na cijelu stranicu.
#tiger (položaj: relativan; prikaz: inline-block;)
#tigar ( položaj: relativan; prikaz: inline - blok; |
Blok-in-line prikaz će spriječiti da se blok (a s njim i blok s nagovještajem koji ćemo kreirati) rastegne na punu širinu prozora. Ostaje stvoriti sam opis alata. Vrlo je zgodno to učiniti u css koristeći pseudoelemente. Kao ovo:
#tiger: lebdjeti: nakon (sadržaj: attr (naziv-podataka); položaj: apsolutni; lijevo: 0; dno: 0; pozadina: rgba (5,13,156, .55); boja: #fff; poravnanje teksta: središte ; font-family: cursive; font-size: 14px; padding: 3px 0; širina: 100%;)
#tigar: lebdjeti: nakon ( sadržaj: attr (podatak - naziv); pozicija: apsolutna; lijevo: 0; dno: 0; pozadina: rgba (5, 13, 156,. 55); boja: #fff; tekst - poravnati: središte; font - obitelj: kurziv; font - veličina: 14px; padding: 3px 0; širina: 100%; |
Koda ima puno, ali ovdje nema ništa komplicirano. Selektor #tiger: hover: after znači sljedeće: kada pređemo mišem iznad bloka sa slikom, trebamo kreirati pseudoelement after (i tada su pravila navedena u vitičastim zagradama). Svojstvo content: attr (ime-podataka) postavlja vrijednost teksta za blok. Bit će jednako onome što je zapisano u atributu imena podataka bloka omota slike.
Ovaj se nagovještaj pojavljuje kada zadržite pokazivač miša iznad slike, ali za razliku od standardnog, to čini naglo, a sam izgled se javlja neposredno u trenutku lebdenja. U ovom slučaju, glatki izgled se ne može implementirati, jer glatki prijelazi nisu podržani za pseudoelemente.
Metoda 2. Čist css i glatki izgled
Međutim, poprilično prepisivanjem koda, možete postići gladak izgled opisa alata, i opet, bez korištenja javascripta.
Da biste sami vidjeli 2 efekta, koje ću vam pokazati kasnije, preporučam da otvorite notepad ili bilo koji prikladan uređivač koda i sve ponovite za mnom. Istina, za to još uvijek trebate povezati datoteku stila, iako se stilovi također mogu napisati u html-u u oznakama