CSS tooltip

Crearea Quickinfo CSS.

Exemple Tooltip: Demo

Un tooltip este adesea folosit pentru a specifica informații suplimentare despre ceva atunci când utilizatorul deplasează cursorul mouse-ului peste un element:

Tooltip de bază

Creați un tooltip care apare atunci când utilizatorul deplasează mouse-ul peste un element:

exemplu explicat

HTML) Utilizați un element container (like <div> ) și adăugați "tooltip" clasa de la ea. Atunci când utilizatorul mouse - ul peste acest <div> , se va afișa textul tooltip.

Textul tooltip este plasat în interiorul unui element inline (like <span> ) cu class="tooltiptext" .

CSS) La tooltip clasa de utilizare position:relative , care este necesară pentru a poziționa textul tooltip ( position:absolute ) . Notă: A se vedea exemplele de mai jos cu privire la modul de a poziționa tooltip.

tooltiptext clasa deține textul real tooltip. Acesta este ascuns în mod implicit, și va fi vizibil pe Hover (see below) . Am adăugat, de asemenea, unele stiluri de bază pentru aceasta: lățime 120px, culoarea de fundal negru, culoare text alb, text centrat, și 5px de sus și de jos de umplutură.

CSS3 border-radius proprietatea este folosită pentru a adăuga colturi rotunjite la textul tooltip.

:hover Selectorul este folosit pentru a afișa textul tooltip atunci când utilizatorul deplasează mouse - ul peste <div> cu class="tooltip" .

poziţionarea Bule

În acest exemplu, tooltip este plasat la dreapta (left:105%) din "hoverable" textul (<div>) . De asemenea , rețineți că top:-5px de top:-5px este folosit pentru a plasa în mijlocul elementului său container. Noi folosim numărul 5 deoarece textul tooltip are o căptușeală de sus și de jos a 5px. Dacă materialul de umplutură crește, crește , de asemenea , valoarea de top proprietate pentru a se asigura că acesta rămâne în mijloc (if this is something you want) în (if this is something you want) în care (if this is something you want) . Același lucru este valabil și dacă doriți tooltip plasate spre stânga.

Dacă doriți ca tooltip să apară în partea de sus sau în partea de jos, a se vedea exemplele de mai jos. Rețineți că vom folosi margin-left de proprietate , cu o valoare de minus 60 de pixeli. Acest lucru este de a centra tooltip de mai sus / jos textul hoverable. Este setat la jumătatea lățimii ponturile lui (120/2 = 60) .

Săgeți Tooltip

Pentru a crea o săgeată care ar trebui să apară dintr - o parte specifică a tooltip, se adaugă "empty" conținut după tooltip, cu clasa element pseudo ::after împreună cu content de proprietate. Săgeata în sine este creat folosind frontiere. Acest lucru va face aspectul tooltip ca un balon de vorbire.

Acest exemplu demonstrează modul în care să adăugați o săgeată în partea de jos a tooltip:

exemplu explicat

Poziționați săgeata din interiorul tooltip: top: 100% va plasa săgeata din partea de jos a tooltip. left: 50% se va centra pe săgeata.

Notă: border-width proprietate specifică dimensiunea de săgeată. Dacă schimbați acest lucru, de asemenea , schimba margin-left de valoare la fel. Acest lucru va menține săgeata centrată.

De border-color este folosit pentru a transforma conținutul într - o săgeată. Am stabilit granița de sus la negru, iar restul la transparent. În cazul în care toate părțile au fost negru, v-ar termina cu o cutie pătrat negru.

Acest exemplu demonstrează modul în care să adăugați o săgeată în partea de sus a tooltip. Observați că am stabilit culoarea de jos a frontierei de această dată:

Acest exemplu demonstrează modul în care să adăugați o săgeată la stânga tooltip:

Acest exemplu demonstrează modul în care să adăugați o săgeată la dreapta tooltip:

Fade In Tooltips (Animation)

Dacă doriți să se estompeze în text tooltip când este pe cale să fie vizibile, puteți folosi CSS3 de transition de proprietate , împreună cu opacity de proprietate, și du - te de la a fi complet invizibil la 100% vizibil, într - un număr de secunde specificate (1 second in our example) :

Notă: Vei afla mai multe despre tranziții și animații mai târziu în programul nostru de instruire.