În acest tutorial vom face un sfat explicativ atunci când trecem cu mouse-ul peste o pictogramă folosind CSS pur. Exact același principiu poate fi aplicat unei imagini. Accesați pagina demo.
Să creăm o listă de cinci articole. În interiorul fiecărui articol vom plasa o etichetă i cu pictograma dorită, pur și simplu copiend codul pentru o anumită pictogramă de pe site-ul Font Awesome.
Sub eticheta pictogramei vom scrie o etichetă span cu un text scurt indiciu corespunzător.
După aceea, includem fișierul de stil - style.css. Schimbați poziția pictogramelor de la verticală la orizontală.
Pentru a face acest lucru, atribuim valoarea - flex containerului părinte.
Colorăm fundalul sub icoane și culoarea icoanelor în sine.
Dimensiunea pictogramei este setată folosind dimensiunea fontului.
Aspectul rândului de pictograme a fost deja format.
Când treceți cursorul peste o pictogramă, culoarea pictogramei și aspectul cursorului se schimbă.
Când treceți cu mouse-ul peste pictogramă, va apărea o indicație text într-un bloc dreptunghiular în marcaj HTML, acesta este textul din eticheta span. Să punem indicii deasupra pictogramelor.
Să setăm dimensiunile cutiei la următoarele dimensiuni fixe.
Aliniază textul la centru vertical și orizontal.
Culoarea fundalului, culoarea textului și dimensiunea textului.
Rotunjiți colțurile cu 4 pixeli și faceți o tranziție lină atunci când treceți cu mouse-ul.
Indicatorul este făcut invizibil și transparent.
Pentru a desena o săgeată mică sub bloc, vom folosi pseudo-elementul ::before, ceea ce înseamnă, în practică, că săgeata nu este de fapt prezentă în fișierul HTML (conținut gol), ci există doar în fișierul CSS. O săgeată îndreptată spre o pictogramă nu este altceva decât o formă pătrată de 10x10 pixeli, rotită la 45 de grade și apăsată pe un bloc cu o valoare negativă. Ca rezultat, pătratul este transformat într-un triunghi și se află pe un strat mai mic indicele z: -1 decât eticheta span părinte.
Furnizarea de informații suplimentare despre elementele interfeței cu utilizatorul potențial complexe este o parte foarte importantă a muncii unui designer web în dezvoltarea unui site web ușor de utilizat și accesibil.
Un mecanism folosit în mod obișnuit pentru afișarea informațiilor suplimentare dincolo de ceea ce este vizibil pe pagină este sfaturile instrumente (elementele de design pentru afișarea indicii despre anumite elemente pe ecran).
Deși există multe soluții inovatoare care folosesc CSS și JavaScript (cu sau fără utilizarea unui cadru JavaScript, cum ar fi jQuery), uneori este util să ne uităm la modul în care noile tehnologii schimbă tehnicile de lungă durată.
Acest tutorial vă va arăta cum puteți face sfaturi uimitoare între browsere folosind doar CSS.
Oriunde aveți nevoie să explicați o abreviere sau un acronim, să explicați semnificația unui cuvânt sau să furnizați informații suplimentare despre ceva, sfaturile instrumente reprezintă o soluție simplă, dar eficientă.
De la micul bloc galben de text care apare deasupra unui element, cum ar fi o imagine și care afișează conținutul atributului titlu (sau al atributului alt dacă sunteți suficient de nefericit să utilizați Internet Explorer) până la soluții sofisticate bazate pe scripturi, folosind sfaturi cu instrumente, sfaturile instrumente sunt un instrument fantastic care pare să aibă puțină popularitate în comunitatea de design.
În timp ce standardele care evoluează rapid cu noi tehnici încep să fie din ce în ce mai bine susținute de noile browsere, creșterea CSS ne permite, de asemenea, să facem sfaturi cu instrumente (care servesc ca înlocuitor pentru setările implicite plictisitoare ale browserului, cum ar fi cel de mai sus) la un nou nivel de detaliu și design.
Dacă ați mai folosit soluții bazate pe jQuery, veți observa cu siguranță că JavaScript poate face o mulțime de lucruri pe care CSS nu le poate face (cum ar fi întârzierea ca balonul să dispară). Dar evidențierea și stilizarea se pot face cu CSS, care vă îmbunătățește designul și inspiră alte modele grozave care depășesc sfaturile instrumente.
În acest tutorial vom face sfaturi folosind CSS pur.
Aceasta înseamnă că vor funcționa în browsere care nu acceptă CSS3 (cum ar fi Internet Explorer 8 și mai vechi) - nu vor arăta la fel de bine în ele ca în browserele mai noi.
Aspectul unor efecte cum ar fi culorile, fonturile, imaginile și cadrele tooltip va depinde de ceea ce este utilizat pe computerul utilizatorului final (browser, fonturi instalate sau contrastul monitorului).
Extensii CSS3 Folosirea extensiilor simple, dar eficiente, cum ar fi proprietățile de rază de margine și umbră de casetă, poate da unui dreptunghi simplu cu mesaj balon un aspect nou și frumos.
Ce e sub capota noastră? Să începem cu codul HTML pentru exemplul nostru.
diferite tipuri de tooltips Pentru a vă oferi suficiente idei pentru propriile proiecte, vom realiza cinci tipuri diferite de sfaturi.
Fiecare dintre ele arată foarte asemănător cu celelalte pentru a standardiza ieșirea afișajului. Dar puteți experimenta cu ele mai târziu pentru a le studia în detaliu și pentru a schimba aspectul.
Acest mecanism ar trebui să funcționeze în toate browserele, totuși, dacă aveți nevoie, îl puteți schimba după bunul plac.
Markup de bază În codul de mai jos, folosim șablonul generic XHTML 1.0 cu un element obișnuit.
Deoarece folosim CSS pentru a construi elementele noastre, în scopuri de învățare, CSS este încorporat în document folosind .
De asemenea, puteți adăuga cod jQuery sau JavaScript pentru a îmbunătăți efectele și funcționalitatea, dacă doriți!
Sfaturi instrumente de marcare HTML Un exemplu de sfaturi instrumente realizate cu CSS! ?
De ce este folosită o etichetă pentru sfaturi cu instrumente?
Motivul pentru care folosim eticheta a mai degrabă decât abbr , dfn sau span este că IE6 are suport slab pentru pseudo-selectorul :hover pentru alte elemente decât un .
Dacă nu intenționați să acceptați IE6, puteți utiliza o altă etichetă.
Fiecare element span din exemplu este setat la clasa clasic (pentru un sfat explicativ obișnuit) sau personalizat (cu critici , ajutor , informații sau avertismente pentru a se potrivi cu schema de culori utilizată).
Această utilizare a stilului are, de asemenea, câteva bonusuri sub forma unui element em (care setează titlul balonului cu instrumente) și al unei imagini (care este folosită ca pictogramă în balonul cu instrumente; vă puteți folosi propriile imagini). CSS
Am scris codul HTML pentru pagină și este timpul să facem ca sfaturile instrumente să-și facă treaba.
Codul de mai jos, care este adăugat într-o secțiune a paginii, setează fiecare link care conține sfatul instrument la un stil mic și drăguț cu o linie de subliniere punctată (pentru a-l diferenția de un link obișnuit, care are o linie continuă de subliniere) și setează cursorul cu semn de întrebare (tot pentru diferențierea vizuală).
De asemenea, elimină sublinierea și setează culoarea (deci elementul arată mai puțin ca un link obișnuit).
A doua parte a codului ascunde pur și simplu indicația până când este nevoie.
Este foarte simplu! Conținutul balonului explicativ este eliminat din vizualizare prin utilizarea unei proprietăți negative margin-left, mai degrabă decât afișare: niciuna sau vizibilitate: ascunsă, deoarece unele cititoare de ecran ignoră aceste proprietăți.
Stiluri CSS pentru sfaturi cu instrumente În curând, vom face ca sfaturile instrumente să funcționeze în același mod în diferite browsere. Acum să adăugăm câteva rânduri de cod CSS.
Adăugând următoarea bucată de cod, vom afișa indicații pe ecran, deși acestea vor părea banale și vor fi greu de separat vizual de restul textului.
CSS pentru afișarea tooltip .tooltip:hover span (familie de fonturi: Calibri, Tahoma, Geneva, sans-serif; poziție: absolut; stânga: 1em; sus: 2em; z-index: 99; margine-stânga: 0; lățime: 250px; .tooltip:hover img ( chenar: 0; margine: -10px 0 0 -55px; float: stânga; poziție: absolut; ) .tooltip:hover em ( font-family: Candara, Tahoma, Geneva, sans-serif ; dimensiunea fontului: 1.2em; greutatea fontului: bold: 0.2em 0.6em 0 .classic (padding: 0.8em 1em; ) .custom (padding: 0.5em 0.8em; ) ( fundal: transparent; ) Linia necesară * html Poate vă întrebați de ce este inclusă ultima linie din codul de mai sus? Setează transparența pentru fundalul link-ului. În timp ce testam sfaturi cu instrumente, am descoperit un efect ciudat în IE6 care nu a putut fi eliminat atâta timp cât a existat fundalul link-ului!
Codul de mai sus asigură funcționalitatea tooltips-urilor. Sunt afișate pe ecran, dar sunt destul de greu de separat de textul general. Nu există scheme de culori care să scoată în evidență textul cu explicații pe pagină.
Setați schema de culori pentru sfaturi cu instrumente/ Următorul cod stabilește o schemă de culori pentru fiecare dintre cele cinci stiluri de indicații.
După schimbarea codului paginii și actualizarea acestuia în browser, vor apărea sfaturi cu instrumente când treceți cu mouse-ul peste link aproape la fel în toate browserele.
Cod CSS pentru schema de culori .clasic ( fundal: #FFFFAA; chenar: 1px solid #FFAD33; ) .critical ( fundal: #FFCCAA; chenar: 1px solid #FF3334; ) .help ( fundal: #9FDAEE; chenar: 1px solid # 2BB0D7; ) .info ( fundal: #9FDAEE; chenar: 1px solid #2BB0D7; ) .avertisment ( fundal: #FFFFAA; chenar: 1px solid #FFAD33; ) Codul CSS este foarte simplu, dar oferă un aspect grozav sfaturilor și își face treaba peste tot. Schema de culori poate fi schimbată la discreția dvs.
Câteva atingeri de CSS3 pentru afișarea avansată a balonului cu instrumente Înainte de a termina acest tutorial, vom adăuga câteva rânduri de cod CSS3 pentru a adăuga efecte vizuale la sfaturile noastre. Să setăm colțuri rotunjite folosind proprietatea border-radius și să adăugăm o dimensiune folosind proprietatea box-shadow.
Deoarece niciuna dintre aceste proprietăți nu este acceptată la nivel global, ele vor funcționa doar în unele dintre cele mai noi versiuni de browser. Dar acolo unde funcționează, sfaturile instrumente vor arăta elegant și sexy!
Să adăugăm codul de mai jos în intervalul selector.tooltip:hover și să reîmprospătăm pagina.
Efectele vizuale pentru chenar, umbră și transparență ridică sfatul instrument deasupra textului paginii și fac informațiile contrastante și ușor de citit.
Este posibil să observați că nu sunt folosite doar proprietățile oficiale CSS3, ci și extensii pentru Mozilla și WebKit.
Proprietăți CSS suplimentare pentru noile browsere 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); 
Relua Acest tutorial demonstrează că îmbunătățirea interfeței nu necesită mult efort. În plus, merită să trecem în revistă experiența utilizării CSS, care poate fi utilă în stabilirea unui nou nivel de interactivitate pentru o aplicație web.
În acest articol vreau să discut mai multe opțiuni pentru organizarea unei astfel de caracteristici în orice aspect. Apropo, am deja un exemplu viu al unei astfel de implementări pe site-ul meu. Dacă derulați în jos la comentariile de pe această pagină și treceți cu mouse-ul peste data comentariului, va deveni imediat clar exact ceea ce se spune. Ei bine, dacă încă nu există comentarii, puteți lăsa unul în același timp.
Văd două metode principale de implementare a unui tooltip, acesta este pe hover, care este și cel mai popular și mai puțin popular atunci când dați clic pe un element. Să începem în mod natural cu aspectul unui sfat explicativ atunci când treceți cu mouse-ul peste un element.
În acest articol, m-am gândit să încep cu cel mai primitiv lucru, afișarea unui indiciu folosind title , care nu poate fi formatat în niciun fel, dar cred că îl puteți sări peste el, deoarece este deja clar. Dacă cele de mai sus nu vă sunt în totalitate clare, cred că după ce am studiat videoclipul despre, totul va deveni mult mai clar.
O modalitate simplă cu design, la hover. Nu este mai complicată decât metoda pe care am ratat-o. Numai în loc de atributul title voi folosi data-title și design folosind stiluri CSS. De fapt, dau mai jos codul html:
?
/* Folosim pseudo-elementul after pentru a proiecta bara în sine, dar în același timp o ascundem, deoarece ar trebui să apară doar la hover */ .hover:after (conținut: attr(data-title); display: none ;poziție: absolute: 130%: 0px padding: 5px 1px rgba; box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;) / * Adăugați o proprietate astfel încât atunci când treceți cu mouse-ul peste un element, să apară o casetă cu indicii */ .hover:hover:after(display: block;)
Aici aș dori să vă atrag atenția asupra faptului că acesta este doar un exemplu de proprietăți de design. Puteți proiecta în mod natural aspectul matriței după cum doriți.
Sfat instrument la trecerea cu mouse-ul. Acesta este probabil cel mai popular mod de a implementa această caracteristică. Cel puțin asta folosesc cel mai des.
?
acesta este un sfat de design
/* setează poziționarea relativă la container */ .block(position:relative;) /* Proiectează elementul ascuns în mod implicit */ .hidden (afișare: niciunul; poziție: absolut; jos: 130%; stânga: 0px; fundal- culoare: # fff; text-align: 0 1px rgba (0,0,0,.16); -shadow: 0 1px 1px rgba(0,0,0,.16 font-size: 12px;) /* Decorare suplimentară pentru elementul ascuns (opțional) */ .hover + .hidden:before (conținut: " "); ; ; dreapta: 7px solid #fff-color: #fff transparent z-index: 2;) /* Decorare suplimentară pentru elementul ascuns (opțional) */ .hover + .hidden :after (conținut: " "; : absolute: 100% margine-stânga: 5px; chenar: 7px solid transparent; chenar-dreapta: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;) /* Aspectul unui element ascuns la hover */ .hover:hover + .hidden(display: block;)
Aceste două opțiuni pot fi utilizate pe site-ul dvs. pentru a afișa un sfat explicativ atunci când treceți cursorul.
Mai sunt două metode, dar sunt aproape identice, cu excepția faptului că elementul va apărea atunci când dai clic pe un element care este întotdeauna afișat pe site.
O modalitate simplă cu înregistrare, prin clic. În cazul unui clic, codul va arăta exact la fel. Singurul lucru este că pentru comoditate am înlocuit clasa unor elemente. Pseudoclasa focus este, de asemenea, folosită în loc de hover . De asemenea, este de remarcat faptul că pentru ca această metodă să funcționeze, este necesar să o înlocuiți cu , adică cu un hyperlink.
?
Codul CSS în acest caz este similar cu aspectul unui bloc la hover, doar alte clase sunt folosite pentru comoditate. Și pentru o funcționare corectă, schimbăm pseudo-clasa în focus .
/* Folosim pseudo-clasa after pentru a proiecta spotul în sine, dar în același timp îl ascundem, deoarece ar trebui să apară numai când se dă clic */ .focus:after (conținut: attr(data-title); afișare: niciunul ; poziție: absolute: 130%: 0px-padding: 0,0,0,16; box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;) / * Adăugați o proprietate astfel încât atunci când faceți clic pe un element, să apară o casetă cu indicii */ .focus:focus:after(display: block;)
După cum puteți vedea, practic nu există nicio diferență.
Indicator la clic. Această metodă de clic va fi, de asemenea, mai relevantă dacă trebuie să formatați balonul cu instrumente puțin mai bine decât este posibil în opțiunea anterioară.
?
Și designul real al matriței:
/* setează poziționarea relativă la container */ .block(position:relative;) /* Proiectează elementul ascuns în mod implicit */ .hidden (afișare: niciunul; poziție: absolut; jos: 130%; stânga: 0px; fundal- culoare: # fff; text-align: 0 1px rgba (0,0,0,.16); -shadow: 0 1px 1px rgba(0,0,0,.16 font-size: 12px;) /* Decorare suplimentară pentru elementul ascuns (opțional) */ .focus + .hidden:before (conținut: " "); ; ; dreapta: 7px solid #fff-color: #fff transparent z-index: 2;) /* Decorare suplimentară pentru elementul ascuns (opțional) */ .focus + .hidden :after (conținut: " "; : absolute: 100% margine-stânga: 5px; chenar: 7px solid transparent; chenar-dreapta: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;) /* Aspectul unui element ascuns la clic */ .focus:focus + .hidden(afișare: bloc;)
După cum puteți vedea, nu este nimic complicat. În plus, puteți organiza schimbările de stare atât prin trecerea cu mouse-ul, cât și prin clic. Deși, ca să fiu sincer, nu pot spune cât de relevantă este metoda click-to-click.
Există, de asemenea, o imitație a ultimului exemplu folosind , dar utilizarea lui mi se pare că nu este în întregime corectă, în special pentru organizarea unui sfat explicativ pe site-ul dvs. Dacă nu sunteți puternic de acord cu mine, bine ați venit la comentarii.
Lecție video - Balon explicativ fără scripturi.
Asta e tot pentru mine. Mult succes tuturor.
Este puțin probabil ca specialiștii în aspect să găsească ceva nou pentru ei înșiși în această postare. Această postare este mai degrabă pentru designerii de layout începători care, ca mine, au avut probleme la crearea și stilul de sfaturi universale.
Recent, când făceam un blog mic, m-am confruntat cu sarcina de a face sfaturi cu instrumente elegante, dar în același timp simple. După ce am încercat diferite moduri de a crea containere div separate pentru tooltips, sau de a crea tooltips cu CSS pur, am găsit o soluție universală care nu va aglomera codul, va fi compatibilă între browsere și, în același timp, va fi foarte simplu de implementat.
Oricine este interesat de metoda mea de a rezolva această problemă simplă, vă rugăm să consultați cat.
Soluție Metoda pe care ți-o voi oferi este destul de simplă și eficientă. Funcționează în toate browserele, chiar și IE 6 (testat de mine de multe ori). Ușor de schimbat și convenabil. Nu aglomera codul și îl clarifică. Poate fi schimbat cu ușurință pentru a se potrivi nevoilor dumneavoastră. De exemplu, întârzieți afișarea unui balon explicativ folosind setTimeout sau altceva.HTML Să presupunem că avem o pagină HTML cu un link, atunci când trecem cu mouse-ul peste ea, trebuie să afișam un balon explicativ:
Link pentru sfaturi instrumente
După cum poate ați observat deja din listă, folosesc preprocesorul LESS css.
Am inclus stiluri și scripturi CSS în fișiere separate. Avem, de asemenea, un link și un bloc div, care va fi containerul pentru sfatul instrument.
Specificația HTML5 permite utilizarea atributelor personalizate de tipul atribut de date, care pot stoca unele informații despre un element sau bloc. În atributele de date vom salva textul sfaturile instrumente.
Legătură
Pentru stocare folosesc atributul data-tooltip.
Am terminat cu HTML - putem trece la stiluri CSS. Folosesc biblioteca LESS Elements și o recomand tuturor, așa că voi scrie câteva proprietăți folosind acest cadru.
@import „css/elements.less”; #tooltip ( z-index: 9999; poziție: absolut; afișare: niciunul; sus:0px; stânga:0px; fundal-culoare: #000; umplutură: 5px 10px 5px 10px; culoare: alb; .opacity(0,5); . rotunjit(5px)
Din listare este clar că în prima linie conectăm LE, setăm blocul div#tooltip la poziționare absolută și îl ascundem. Apoi, dăm blocului o culoare de fundal și o culoare de text, facem colțurile rotunjite (5px) și setăm valoarea transparenței la 50%.
$.jQuery(document).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( „sus”: eventObject.pageY + 5, „stânga”: eventObject.pageX + 5 )) .show()).mouseout(function () ( $("#tooltip.); ").hide() .text("") .css(( "sus": 0, "stânga": 0 )); )); ));// Sfârșit gata.
Acum adăugăm toate elementele cu atributul data-tooltip la selecție și când trecem cu mouse-ul peste elementul dorit, obținem valoarea tooltip și o stocăm într-o variabilă. În continuare, adăugăm textul descrierii în blocul #tooltip, îi dăm coordonatele cursorului de la marginea paginii + 5 px și în final afișăm blocul cu indicația în locul potrivit. După ce mouse-ul părăsește elementul, ascundem blocul #tooltip, ștergem conținutul acestuia și îl întoarcem la 0;0;. Asta este!
Ca rezultat, vom obține ceva de genul acesta: Demo
Datorită acestui script simplu, toate elementele de pe pagină care au atributul data-tooltip vor primi un tooltip.
Vă mulțumim pentru atenție!
Astăzi vom crea sfaturi cu ajutorul CSS. Sfaturile instrumente sunt ceea ce vedeți când treceți cu mouse-ul peste, de exemplu, un link dacă atributul titlu conține o descriere a acestuia.
Tooltip poate fi folosit atât pentru linkuri, cât și pentru imagini.
În forma sa brută, balonul arată astfel:
Indicatorul este afișat folosind metoda standard de sistem folosind atributul title.
Cod de legătură standard cu indicație fără decor:
Legătură
Sfat instrument CSS Puteți să vă stilați balonul folosind CSS. Ne vom uita la trei opțiuni tooltip în CSS.
Din păcate, nu există o „rețetă” CSS pentru designul titlului, așa că va trebui să adăugăm atribute suplimentare, să le desemnăm designul și să le adăugăm la linkul/codul imaginii pentru care dorim să facem un frumos tooltip CSS.
În primul exemplu vom face tooltip CSS deasupra imaginii din partea de jos.
Pentru a face acest lucru, vom folosi două atribute: imagine și, pentru ca indicația să funcționeze, vom folosi ::after și data-text pentru a afișa textul descrierii.
Stiluri CSS pentru acest exemplu:
Imagine ( afișare: bloc în linie; poziție: relativă; ) .image:hover::after ( conținut: attr(text-date); /* Afișează textul descrierii descrierii */ poziție: absolut; stânga: 0; dreapta: 0; jos: 0px /* Poziția tooltip */ z-index: 1 /* Afișează tooltip deasupra altor elemente */ fundal: rgba(0,255,102,0.6) și transparența acestuia */; color: # fff /* Text-align: center /* Aliniați textul la centru */ font-family: Arial, sans-serif */ font-size; * Dimensiunea textului descrierii * / padding: 5px 10px /* Margini */ chenar: 1px solid #333 /* Border options */ )
Acest design nu va funcționa pentru link-uri, așa că vom folosi opțiuni ușor diferite pentru ele.
Prima opțiune va afișa un tooltip deasupra linkului.
Podskazka( display: inline; position: relative;).podskazka:hover:after( background: #333; background: rgba(204,102,0,.8); border-radius: 5px; bottom: 26px; culoare: #fff; content: attr(title padding: 5px 15px position: absolute width: auto;).podskazka:hover:before( /* Adăugați o săgeată în partea de jos a blocului tooltip; border-color: #cc6600 lățime margine: 6px 6px conținut: "";
Și ultima opțiune este să afișați un sfat explicativ sub link. Opțiunea este similară cu cea anterioară, mai jos este afișat doar indicația.
Tooltip ( poziție: relativ; /* Faceți elementul părinte pentru tooltips */ cursor: help;).tooltip span ( poziție: absolut; /* Scoateți elementul din flux */ margin-left: -30000px; /* Și ascunde-l departe de marginea ecranului */ background-color: rgba(0,0,153,.8 /* Background of the popup block */ color: #fafafa */ padding:10px; * Padding */ -webkit-border- radius: 5px /* Round the corners */ -moz-border-radius: 5px-border-radius: 5px;).tooltip:hover span; ( /* La trecerea cursorului */ margin-left: 0; /* Readuceți blocul de la marginea îndepărtată a ecranului la locul său */ lățime: 250px; /* Setați lățimea */ z-index: 1000; /* Plasați este foarte sus */ /* Poziționați-l în raport cu blocul părinte */ top:30px ; /* Top padding */ left:20px /* Left padding */ ). /* Adăugat conținut */ width:0 /* Ascuns, transformându-l la 0 */ height :0: 10px solid #000099 /* Folosiți chenarul de jos pentru a seta culoarea și înălțimea triunghiului; / chenar-dreapta: 30px solid transparent; /* Dreapta - lățimea triunghiului la dreapta */ poziție: absolută; /* Poziția relativă la blocul părinte */ top:-10px; stânga:10px;)
Post criticAcesta este doar un exemplu despre cum să faci sfaturi cu instrumente folosind CSS!, ajutor 
AjutorAcesta este doar un exemplu despre cum să faci sfaturi cu instrumente folosind CSS!, informații 
InfoAcesta este doar un exemplu despre cum să faci sfaturi cu ajutorul CSS! 
si avertisment 
