Share
Seturile de instrumente sunt relativ simple de implementat prin adăugarea unui pic de marcaj HTML și prin utilizarea unui pic de CSS. Cu toate acestea, dacă nu ați auzit de atributele de date HTML5, vă recomandăm să verificați această abordare alternativă (și mult mai curată).
Dacă ați urmat seria de Bărbați de admin, acest sincronizare ar trebui să termine lucrurile bine. daca tu nu au urmați, nu vă faceți griji; acest ecran va va invata ceva ce puteti folosi in toate tipurile de situatii. Vom vedea cateva optiuni pentru a face ca sfaturile noastre sa functioneze.
Dacă, dintr-un motiv nebun, nu vrei să mă urmărești să demonstrez lucrurile, mai jos sunt câteva fragmente pentru a le lua și a te juca. Notă: acestea sunt exemple simplificate - este posibil să doriți să adăugați prefixe de browser și stil de design etc..
Primul exemplu folosește marcajul suplimentar sub forma a în ancora noastră. Funcționează foarte bine, ne permite să adăugăm un punct "decorativ" în tooltip-ul nostru și în prezent este cea mai sigură opțiune în care este compatibilă browserul.
HTML:
Accentsconagua
Acesta este linkulacesta este vârful! CSS:
Spațiul a.tooltip font-size: 10px; Poziția: absolută; z-index: 999; white-space: nowrap; jos: 9999px; stânga: 50%; fundal: # 000; Culoare: # e0e0e0; padding: 0px 7px; linia-înălțime: 24px; înălțime: 24px; opacitate: 0; tranziție: opacitate 0,4 secunde; a.tooltip span :: înainte de content: ""; afișare: bloc; frontieră-stânga: 6px solid # 000000; vârf frontal: 6px solid transparent; poziția: absolută; top: -6px; stânga: 0px; a.tooltip: interval de hover opacity: 1; jos: -35px;
Iată exemplul care ne curăță marcajul, folosește HTML5 date-atribut pentru a păstra valoarea sugestiei noastre și a css-ului ::inainte de pseudo-element pentru ao afișa. Mult mai curat.
HTML:
Acesta este linkul
CSS:
a.tooltip :: înainte de content: attr (data-tip); font-size: 10px; Poziția: absolută; z-index: 999; white-space: nowrap; jos: 9999px; stânga: 50%; fundal: # 000; Culoare: # e0e0e0; padding: 0px 7px; linia-înălțime: 24px; înălțime: 24px; opacitate: 0; tranziție: opacitate 0,4 secunde; a.tooltip: hover :: înainte de opacity: 1; jos: -35px;
