De la autor: Salut. Un balon explicativ este un mic text explicativ care apare atunci când treceți cu mouse-ul peste un element, de obicei o imagine. Astăzi ne vom uita la modul în care puteți crea un sfat explicativ în HTML în diferite moduri.

Sugestie standard

În mod implicit, atributul titlu este responsabil pentru afișarea textului explicativ. Poate fi folosit pentru diferite elemente, dar de obicei este folosit doar pentru imagini pentru a explica ceea ce arată acestea.

Într-unul dintre articolele anterioare, am folosit o imagine a unui tigru pentru a arăta lucrul cu dimensiunile imaginii. Dacă nu te superi, voi folosi această imagine din nou. Deci, pentru a afișa un indiciu, trebuie doar să adăugați atributul titlu și să scrieți textul dorit în el.

< img src = "tiger.jpg" title = "Acesta este un tigru" >

Pot exista fie un cuvânt, fie mai multe propoziții. Și așa arată:

Sugestia apare lin, nu imediat după plutirea, ci după ceva timp. Acesta este comportamentul implicit.

Principala problemă cu un astfel de sfat instrument este că nu poate fi stilizat. Cum se rezolvă această problemă? Va trebui să dăm un indiciu în alte moduri. Acum o să vă arăt câteva.

Metoda CSS pură

Un mod foarte interesant care vă permite să afișați frumos un indiciu pentru o imagine. Marcajul HTML este simplu, doar imaginea trebuie să fie închisă într-un container bloc, căruia îi vom atribui un identificator pentru ca ulterior să ne putem referi la el în stiluri:

< div id = "tiger" data - name = "Суматранский тигр" > < img src = "tiger.jpg" > < / div >

Singurul lucru care vă poate fi neclar aici este atributul data-name. Chestia este că acesta este un așa-numit atribut de date care nu face nimic singur, dar valoarea sa poate fi folosită în css și javascript, ceea ce îl face util în unele cazuri. Veți vedea asta în continuare.

Deci, mai întâi, să descriem stilurile pentru container. Avem nevoie de poziționare relativă pentru că vom poziționa în mod absolut blocul cu text explicativ astfel încât poziționarea să aibă loc relativ la blocul părinte, și nu întreaga pagină.

#tiger( poziție: relativă; afișare: bloc inline; )

#tigru( poziție: relativă; afisare: inline - bloc;

Afișarea liniei bloc va împiedica blocul (și odată cu acesta blocul cu sfatul instrument pe care îl vom crea) să se întindă pe toată lățimea ferestrei. Tot ce rămâne este să creați indiciu în sine. În CSS este foarte convenabil să faceți acest lucru folosind pseudo-elemente. Ca aceasta:

#tiger:hover:after (conținut: attr(nume date); poziție: absolut; stânga: 0; jos: 0; fundal: rgba(5,13,156,.55); culoare: #fff; text-align: center ; familie de fonturi: cursive; dimensiunea fontului: 14px; umplutură: 3px 0; lățime: 100%; )

#tiger:hover:după ( continut: attr (date - nume); poziție: absolută; stânga: 0; jos: 0; fundal: rgba(5, 13, 156, . 55); culoare: #fff; text - align : centru ; font - familie : cursiv ; dimensiunea fontului: 14px; umplutură: 3px 0; latime: 100%;

Există mult cod, dar nu este nimic complicat aici. Selectorul #tiger:hover:after înseamnă următoarele: atunci când trecem cu mouse-ul peste un bloc cu o imagine, trebuie să creăm un pseudo-element după (și apoi regulile sunt listate în acolade). Proprietatea content: attr(data-name) setează valoarea textului blocului. Acesta va fi egal cu ceea ce este scris în atributul data-name al blocului de ambalare a imaginii.

Acest tooltip apare atunci când treceți cu mouse-ul peste imagine, dar, spre deosebire de cea standard, face acest lucru brusc, iar aspectul în sine apare imediat în momentul trecerii. În acest caz, nu va fi posibil să se implementeze o tranziție lină, deoarece tranzițiile netede nu sunt acceptate pentru pseudo-elemente.

Metoda 2. Css pur și aspect neted

Cu toate acestea, prin rescrierea codului destul de puțin, puteți obține un aspect neted al descrierii explicative și, din nou, fără a utiliza javascript.

Pentru a vedea singur cele 2 efecte pe care vi le voi arăta în continuare, vă recomand să deschideți Notepad sau orice editor de cod convenabil și să repetați totul după mine. Adevărat, pentru aceasta mai trebuie să includeți un fișier de stil, deși stilurile pot fi scrise și în html în etichete

Deci, codul pentru acest exemplu va fi puțin diferit și asta pentru că nu vom folosi un pseudo element. Din acest motiv, a fost imposibil să se aplice modificări netede. De data aceasta codul va arăta astfel:

tigrul de Sumatra

< div id = "tiger2" > < img src = "tiger.jpg" > < div class = "text" >tigrul de Sumatra< / div > < / div >

Codul CSS nu a suferit modificări majore:

#tiger2( poziție: relativă; afișare: bloc inline; ) #tiger2 .text ( tranziție: toate 0,6 s; opacitate: 0; poziție: absolut; stânga: 0; jos: 0; fundal: rgba(5,13,156,. 55); culoare: #fff; text-align: center; font-family: cursive; font-size: 14px; umplutură: 3px 0; lățime: 100%; transform: scale(0); ) #tiger2:hover .text (opacitate: 1; )

#tigru2( poziție: relativă; afisare: inline - bloc; #tiger2.text ( tranziție: toate 0,6s; transform:scale(0); #tiger2:hover.text( opacitate: 1;

Înlăturăm doar proprietatea conținut, deoarece este suportată doar de pseudo-elemente. Adăugăm proprietatea de tranziție, care creează tranziții de stare lină. Ei bine, opacitatea: 0 va oferi blocului nostru de indicații transparență deplină, deci nu va fi vizibil pe pagină.

Când treceți cu mouse-ul peste un bloc, acum este suficient să returnați transparența normală în bloc cu un sfat explicativ. Gata. Puteți verifica dacă elementul apare fără probleme.

Folosind css3 puteți ascunde un element într-un alt mod. Folosind transformări, de exemplu. Înlocuiți transparența completă cu această proprietate: transform: scale(0) și dimensiunea blocului va fi redusă la zero, așa că pur și simplu nu va fi pe ecran. Când treceți cu mouse-ul peste un bloc cu o imagine, ar trebui să returnați dimensiunea normală astfel: transform: scale(1). În acest caz, efectul de aspect va arăta și mai frumos. Puteți vedea asta pentru dvs.

După cum puteți vedea, în css, tooltip poate apărea încet, cu efecte frumoase.

alte metode

jQuery vă poate oferi și mai multe posibilități. Folosind această bibliotecă, puteți scrie cod pentru a afișa un indiciu fie dvs., fie să găsiți un plugin care implementează deja acest lucru.

De exemplu, cadrul Bootstrap are, de asemenea, multe componente gata făcute, iar una dintre ele este sfaturile instrumente. Puteți căuta în documentație cadru exemple de cod care vă permit să creați aceleași indicii și să le utilizați. Nu este necesar să conectați întregul Bootstrap; în general, puteți lăsa doar o astfel de componentă precum sfaturi de instrumente, descărcați și conectați numai asta.

În general, astăzi v-am arătat modalități în CSS de a crea un tooltip frumos, cu un aspect clar și neted; în plus, aveți Bootstrap și jQuery în arsenalul dvs. Alege orice și implementează sfaturi interesante și frumoase pe site-urile tale!

Vlad Merjevici

HTML are deja un atribut de titlu global care poate fi adăugat oricărui element dintr-o pagină web. Prezența acestui atribut adaugă un sfat explicativ care apare atunci când treceți mouse-ul peste element. Fontul textului, dimensiunea tooltip și aspectul acestuia depind în general de sistemul de operare și nu pot fi modificate folosind stiluri. În plus, mulți dezvoltatori nu sunt fericiți că un astfel de indiciu dispare destul de repede. Acest lucru vă obligă să căutați modalități de a vă crea propriul tooltip, care ar fi proiectat în modul dorit. Desigur, cea mai universală modalitate este, dar în unele cazuri este suficient să te descurci doar cu CSS.

De exemplu, am ales fotografii; când treceți cursorul mouse-ului peste ele, este afișat numele fotografiei. Vom face textul în sine folosind proprietatea conținut și vom lua valoarea textului de la un anumit atribut prin attr() . Din păcate, conținutul nu va funcționa așa cum se dorește în combinație cu img , așa că fotografiile sunt inserate în element, la care adăugăm un atribut data-title cu text tooltip. Există o tentație de a introduce atributul titlu și de a-l folosi, dar în acest caz vor fi afișate simultan două sfaturi: unul este „nativ”, iar celălalt este al nostru. Deci folosim propriul atribut de titlu de date, deoarece HTML5 permite acest lucru. Astfel obținem următorul cod (exemplul 1).

Exemplul 1: cod HTML

HTML5 IE Cr Op Sa Fx

Indicator în CSS

Să trecem la stilul descrierii noastre. Mai întâi trebuie să-l faci să apară. Pentru a face acest lucru, vom folosi pseudo-elementul ::after, la care adăugăm conținut: attr(data-title) .

Foto::after (conținut: attr(data-title); )

Se pare că după conținutul elementului cu clasa foto, va fi afișat textul din atributul data-title, ceea ce ne trebuia. Dar, din moment ce sfatul cu instrumente ar trebui să apară numai când treceți cu mouse-ul peste fotografie cu cursorul mouse-ului, vom adăuga și pseudoclasa :hover.

Foto:hover::after (conținut: attr(data-title); )

Tot ce rămâne este să setați stilul dorit pentru sfatul nostru instrument, în special, poziția, culoarea de fundal, textul, cadrul etc. (exemplul 2).

Exemplul 2: stilul descrierii

HTML5 CSS3 IE Cr Op Sa Fx

Sfat explicativ în CSS .foto ( afișare: bloc inline; /* element de bloc inline */ poziție: relativă; /* Poziționare relativă */ ) .photo:hover::after ( conținut: attr(titlu de date); / * Afișează text */ poziție: absolut; /* Poziționare absolută */ stânga: 20%; sus: 30%; /* Poziție tooltip */ z-index: 1; /* Afișează tooltip deasupra altor elemente */ fundal: rgba ( 255,255,230,0,9); /* Culoare de fundal translucidă */ familie de fonturi: Arial, sans-serif; /* Familia de fonturi */ dimensiunea fontului: 11px; /* Dimensiunea textului indicativului */ umplutură: 5px 10px; /* Margini * / chenar: 1px solid #333; /* Opțiuni pentru chenar */ )

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Tip tooltip

Poziția indicatorului nu depinde de poziția cursorului; el apare în același loc când treceți cursorul peste imagine. Puteți face ca balonul să apară în partea de jos a fotografiei, astfel încât să nu acopere cea mai mare parte a imaginii. Stilul se va schimba ușor (exemplul 3).

Exemplul 3. Afișarea unui sfat explicativ în partea de jos a fotografiei

HTML5 CSS3 IE Cr Op Sa Fx

Sfat explicativ în CSS .foto ( afișare: bloc inline; /* element de bloc inline */ poziție: relativă; /* Poziționare relativă */ ) .photo:hover::after ( conținut: attr(titlu de date); / * Afișează text */ poziție: absolut; /* Poziționare absolută */ stânga: 0; dreapta: 0; jos: 5px; /* Poziție tooltip */ z-index: 1; /* Afișează tooltip deasupra altor elemente */ fundal : rgba(0,42,167,0.6); /* Culoare de fundal semi-transparentă */ culoare: #fff; /* Culoare text */ text-align: center; /* Aliniază textul la centru */ font-family: Arial , sans-serif ; /* Tip font */ dimensiunea fontului: 11px; /* Dimensiunea textului indicativului */ umplutură: 5px 10px; /* Margini */ chenar: 1px solid #333; /* Opțiuni pentru chenar */ )

Rezultatul acestui exemplu este prezentat în Fig. 2.

Orez. 2. Tip tooltip

Din păcate, proprietatea de tranziție, pe care o puteți folosi pentru a anima indicația, nu funcționează cu pseudo-elemente. Prin urmare, va trebui să ne mulțumim cu apariția bruscă a balonului nostru. De asemenea, nu va exista niciun efect în browserul IE8 și mai devreme, această versiune nu acceptă ::după . Cu toate acestea, dacă înlocuiți acest pseudo-element cu :after , puteți obține o opțiune mai mult sau mai puțin funcțională.

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ă, întreb sub 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 de 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 framework.
@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 Acum vine partea distractivă - jQuery.
$.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(funcție () ( $("#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ă. Apoi, adăugăm textul indicii în blocul #tooltip, îi dăm coordonatele cursorului de la marginea paginii + 5 px și în final afișăm blocul cu tooltip î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 e tot!
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!

Un tooltip HTML este un bloc cu informații suplimentare care apar atunci când treceți mouse-ul peste un anumit element al unei pagini web. Astăzi vom crea propriul nostru tooltip folosind HTML și CSS:

Vezi demo | Descărcați codul sursă

Vom putea folosi indicii CSS pentru majoritatea elementelor, cum ar fi linkuri, etichete, text cu stil etc. Va trebui să aplicăm mai multe clase elementului și să adăugăm un atribut de date cu textul descrierii.

Configurarea documentului

Trebuie să creăm un document HTML și să setăm marcajul sursă:

Tooltips Demo // conținut

Am adăugat un link către Normalize.css care ajută la resetarea tuturor stilurilor de browser la implicite și asigură că fiecare element arată la fel în toate browserele. Spre deosebire de o resetare CSS standard, Normalize.css nu elimină toate stilurile implicite, așa că nu va trebui să rescrieți stilul fiecărui element de la zero.

Am creat un div cu o clasă container în care vom plasa exemplele de bază de sfaturi HTML. Iată stilurile pentru corp și clasa .container:

body (familie de fonturi: „Work Sans”, sans-serif; dimensiunea fontului: 1.5em; înălțimea liniei: 1.4em; greutatea fontului: 700; culoarea fundalului: #28ABE3; culoarea: #fff; ) .container ( lățime: 800 px; margine: 100 px automat; fundal: radial-gradient (cercul cel mai îndepărtat colț la 400 px 250 px , #64BBE0 0%, #28ABE3, #28ABE3 95%); )

Am centrat div-ul containerului setând margin-left și margin-right la auto . De asemenea, a adăugat ceva stil la secțiunea caroseriei pentru a-l face să arate mai bine.

Am decis să adaug un mic gradient CSS ușor pentru fundal. Dacă browserul nu acceptă gradienți CSS (acest lucru se aplică în principal la IE 8 și 9), culoarea de fundal va fi comutată înapoi la albastrul implicit (culoarea de fundal a secțiunii corpului).

Voi folosi sugestii HTML pentru trecerea cursorului cu etichete de ancorare, dar puteți atribui clase altor elemente inline, cum ar fi o etichetă puternică sau span . Mai jos este conținutul div-ului containerului:

• Sfat instrument de jos
• Indicator la stânga

  Legăturile le-am atribuit două clase. Clasa tooltip va fi responsabilă pentru corpul tooltip, iar a doua clasă va determina plasarea acestuia.

  Puteți vedea, de asemenea, atributul de date personalizat, care conține textul descrierii noastre HTML.

  Crearea clasei tooltip

  Mai jos este codul pentru clasa tooltip:

  Indicator (poziție: relativ; ) .tooltip:după (poziția: absolut; umplutură: 8px; chenar: 3px solid #fff; chenar-rază: 8px; culoarea fundal: #1FDA9A; dimensiunea fontului: .9em; greutatea fontului : bold; culoare: #fff; conținut: attr(data-tooltip); min-width: 80px; /* width: -moz-max-content; */ /* width: -webkit-max-content; */ opacitate : 0; tranziție: toate .2s ease-in-out .25s; vizibilitate: ascuns; z-index: 2; ) .tooltip:hover:after ( opacitate: 1; vizibilitate: vizibil; )

  Însuși indicația HTML pentru trecerea cursorului este un pseudo-element :după și este poziționată absolut. Acesta este motivul pentru care este necesar să se atribuie o poziție relativă elementului de ancorare. Am adăugat câteva stiluri de bază, cum ar fi umplutură, chenar, dimensiunea fontului și lățimea. Să aruncăm o privire mai atentă asupra proprietății conținutului.

  Conține attr() - o valoare care stochează datele noastre personalizate-tooltip și o folosește pentru a afișa textul tooltip în sine. Puteți folosi orice alt nume în loc de data-tooltip, asigurați-vă doar că începe cu data- . Puteți afla mai multe despre aceste atribute aici.

  Corpul indicativului are o lățime minimă de 80 de pixeli. Dacă doriți ca conținutul descrierii explicative să se întindă într-o singură linie, adăugați valoarea maximă de conținut pentru proprietatea lățime, care este în prezent comentată. Trebuie remarcat faptul că aceasta este o caracteristică experimentală, așa că ar trebui să utilizați prefixele de furnizor -webkit- și -moz- .

  Pentru a oferi sfatului explicativ de trecere cu mouse-ul HTML un efect de animație de diapozitiv, folosim proprietatea de tranziție. Notați valoarea .25s, care specifică întârzierea înainte ca balonul să fie afișat sau ascuns. Astfel, nu va fi afișat dacă treci cu mouse-ul peste text din greșeală, ci doar dacă treci peste text pentru o perioadă mai lungă de timp. De asemenea, am setat opacitatea la 0 și vizibilitatea la ascuns. Nu putem folosi display: none; , deoarece elementul va dispărea complet și nu vom vedea niciun efect de tranziție. Opacitatea și vizibilitatea se modifică atunci când treceți cu mouse-ul peste un element.

  Rezultat:

  Uite

  Notă: am schimbat/eliminat o parte din marcajul și stilul din demonstrația de pe CodePen. Pentru a vedea rezultatul final, consultați demonstrația de la sfârșitul acestui articol.

  Adăugarea de mișcare

  Acum că am implementat indicația HTML care apare/dispărește la trecerea cu mouse-ul, să-l facem să se miște. Am atribuit deja proprietatea animației, tot ce trebuie să facem este să setăm poziția de pornire de unde ar trebui să apară și poziția finală:

  /*Poziția inițială a balonului cu instrumente*/ .tooltip-top:după ( jos: 150%; stânga: 0; ) .tooltip-bottom:după (sus: 155%; stânga: 0; ) .tooltip-left:după (dreapta: 130%; lățime minimă: 100px; ) .tooltip-right:după ( stânga: 130%; lățime minimă: 100px; ) /*Poziția finală a vârfului*/ .tooltip-top:hover:după ( jos: 120%; ) .tooltip-bottom:hover:after (sus: 125%; ) .tooltip-left:hover:after (dreapta: 110%; ) .tooltip-right:hover:after (stânga: 110%; )

  Am decis să adaug această funcționalitate la clase suplimentare. Deci, dacă atribuiți, de exemplu, clasa .tooltip-left , balonul cu instrumente va apărea în partea stângă a textului, dacă adăugați .tooltip-top , balonul cu instrumentele va apărea în partea de sus etc.

  Vezi demonstrația

  În această demonstrație, folosesc clasa .tooltip-right. Puteți experimenta și utiliza diferite clase pentru a defini diferite poziții de indicații HTML.

  Crearea unui triunghi

  Ultimul element al explicației este un mic triunghi pe o parte a blocului. O vom crea folosind pseudo-clasa :before (pseudo-clasa :after este deja folosită pentru sfatul cu instrumente). Îl atribuim celor patru clase de poziție, astfel încât pentru fiecare dintre ele triunghiul să fie scos în mod corespunzător:

  /** * Triunghiuri */ .tooltip-top:before, .tooltip-bottom:before, .tooltip-left:before, .tooltip-right:before (conținut: ""; afișare: bloc; poziție: absolut; chenar- lățime: 7px; stil de bordură: solid; culoarea chenarului: rgba(0, 0, 0, 0); opacitate: 0; tranziție: toate .2s ease-in-out .25s; vizibilitate: ascuns; ) .tooltip- top:hover:before, .tooltip-bottom:hover:before, .tooltip-left:hover:before, .tooltip-right:hover:before ( opacitate: 1; vizibilitate: vizibil; )

  Creăm un triunghi dând o lățime chenarului atunci când elementul în sine nu are lățime sau înălțime. În acest caz, lățimea cadrului este setată la 7 pixeli. Culoarea cadrului este complet transparentă, ceea ce este foarte important. În următorul fragment de cod, atribui o culoare părții corespunzătoare a cadrului, ceea ce îmi permite să definesc forma triunghiului.

  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 proiectare pentru afișarea indicațiilor 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.

  Sfaturile instrumente sunt minunate!

  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 sunt o soluție simplă, dar eficientă.

  De la micul bloc galben de text care apare deasupra unui element, cum ar fi o imagine și 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.

  
  Majoritatea browserelor au stiluri implicite pentru sfaturi cu instrumente, deși nu arată foarte frumos.

  Creșterea impactului sfaturile instrumente

  Î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ă realizăm 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.

  

  Ce vom face

  Î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

  Folosind extensii simple, dar eficiente, cum ar fi proprietățile chenar-rază și casetă-umbră, puteți da unui dreptunghi simplu cu mesaj balon un aspect nou și frumos.

  Ce este 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.

  

  Compatibilitate între browsere

  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!

  Treceți mouse-ul peste text pentru a vedea: indiciu clasic, mesaj critic 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 Avertisment: Acesta este doar un exemplu despre cum să faci sfaturi cu ajutorul CSS!.
  Acesta este doar un exemplu despre cum să faci sfaturi cu ajutorul CSS!

  Codul folosește un element (nimic special asociat cu acesta) și paragrafe (

  ) pentru text care conține elemente de legătură (pentru care este setată clasa „tooltip”).

  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.

  Totul este foarte simplu!

  Stiluri CSS pentru class.tooltip .tooltip ( chenar-jos: 1px punctat #000000; culoare: #000000; contur: niciunul; cursor: ajutor; text-decor: niciunul; poziție: relativ; ) .tooltip span (margine-stânga: -999em; poziție: absolută; )

  Conținutul balonului explicativ este eliminat din vizualizare prin utilizarea unei proprietăți negative margin-stânga în loc de 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 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; afișaj: bloc; umplutură: 0.2em 0 0.6em 0; ) .classic (padding: 0.8em 1em; ) .personalizat (padding: 0.5em 0.8em 0.8em 2em ; ) * html a:hover ( 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 fi afișate sfaturi cu instrumente când treceți 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 balonurilor ș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 la 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 browsere noi 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);

  

  rezumat

  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.