Tooltip nu este nou, dar atunci când este nevoie de a pune în aplicare propria pagină, întrebarea apare adesea: cel mai bine cum să faci? Una pentru o mulțime de sfaturi: să fie o bibliotecă mare, de exemplu, jQuery sau Mootools, sau gata făcute plug-in-uri, iar unele doar a folosi instrumentele HTML si CSS standard. Principalul lucru este de a face un indiciu pop-up interesant și atractiv pentru utilizator.
Astăzi vom face trei tipuri de indicii: un text tooltip, un tooltip cu link-ul și un tooltip cu imaginea. Pentru a face acest lucru, vom folosi doar HTML si CSS3.
Și astfel, să începem să tocit și să marcheze c sfaturile noastre viitoare:
Acum zaymomsya stiluri CSS și pentru a începe, probabil, cu înfășurare:
Cu ajutorul poziționării, am pus cardul în locul potrivit pentru noi, și setați stilul de vizualizare și stiluri comune pentru componentele interne.
Noi folosim pseudo-înainte și a adăuga un semn de întrebare înveliș - aceasta va informa vizitatorii cu privire la cazul în care pentru a primi informații explicative.
Tot conținutul explicativ, care va fi amplasat în tooltip, vom pune în elementul p, dar este condiționată, puteți utiliza orice altă etichetă, ascunde și principalele sale otpozitsionirovat relativ ambalaje.
Utilizatorul plasează cursorul peste tooltip, și ne arată conținutul ascuns. Pentru a adăuga o utilizare buna a proprietății de animație CSS3.
Și partea finală - este adăugarea de săgeți.
A promis trei, și a făcut, cum ar fi doar un singur - o metodă universală în ambalajul, puteți pune orice doriți, chiar și o bucată solidă de cod HTML, cu excepția cazului, desigur, destul de sudoare, cu stiluri de ajustare: