Va rugam dezactivati programul ad block pentru a vizualiza pagina!

Cumpara abonament!
Plateste cu PayPal

CSS Tooltip. Instrumente de poziționare. Tooltip dreapta. Tooltip stânga. Tooltip de sus. Tooltip de jos.

Partajeaza in Google Classroom

Partajeaza cu Google Classroom
Susține Lectii-Virtuale!

Memorator: Descriere video Descarcă PDF

Poziționare Tooltips

În acest exemplu, tooltip-ul este plasat la dreapta (left: 105%) a textului „hoverable” (<div>). De asemenea, rețineți că partea de sus:-5px (top:-5px) este utilizată pentru a-l plasa în mijlocul elementului container. Folosim numărul 5 deoarece textul de tip tooltip are o acoperire de 5px în partea de sus și de jos (top and bottom padding). Dacă măriți padding, creșteți și valoarea proprietății de top pentru a vă asigura că aceasta rămâne la mijloc (dacă este ceea ce doriți). Același lucru este valabil dacă doriți ca tooltip să fie plasat la stânga.

Tooltip dreapta (Right Tooltip)
.tooltip .tooltiptext {
  top: -5px;
  left: 105%;
}

Rezultat:



Tooltip stânga (Left Tooltip)
.tooltip .tooltiptext {
  top: -5px;
  right: 105%;
}

Rezultat:



Dacă doriți ca tooltip să apară în partea de sus sau de jos ( top sau bottom), consultați exemplele de mai jos. Rețineți că folosim proprietatea margin-left cu o valoare de minus 60 pixeli. Acest lucru este pentru a centra tooltip deasupra/sub (above/below ) textul hoverable. Este setat la jumătatea lățimii tooltip-ului (120/2 = 60).

 Tooltip de sus (Top Tooltip)
.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Utilizați jumătate din lățime (120/2 = 60), pentru a centra tooltip-ul */
}

Rezultat:



Tooltip de jos (Bottom Tooltip)
.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Utilizați jumătate din lățime (120/2 = 60) pentru a centra tooltip-ul */
}

Rezultat:

Cumpara abonament
Plătește cu PayPal

Ajutor
Feedback-ul d-voastră este important pentru noi. Dacă observați vreo neregulă vă rugăm să ne-o semnalați apăsând butonul Trimite Feedback de mai jos.

Despre Lecții-Virtuale.ro

Lecții-Virtuale este o platformă educațională care oferă suport în vederea pregătirii pentru Evaluare Națională și Bacalaureat la Matematică, Fizică și Chimie. Lecțiile noastre sunt alcătuite din filme și exerciții și probleme cu tot cu rezolvări. Platforma noastră este o soluție ideală pentru școala online. Pentru facilitarea activității profesorilor în cadrul ecosistemului GSuite de la Google am implementat butonul Google Classroom. Scopul nostru este să ne concentrăm pe prezentarea noțiunilor și fenomenelor într-o manieră care să stimuleze înțelegerea și nu memorarea mecanică. Ne propunem să facilităm accesul la conținut educațional de calitate mai ales elevilor cu venituri mai modeste care nu își pemit meditații particulare. Sperăm să vă simțiti bine alături de noi și să invățați lucruri folositoare. Hai România!

Newsletter

Abonează-te la Newsletter pentru a fi la curent cu toate ofertele noastre.

Parteneri

EduApps partener Lectii Virtuale UiPath partener Lectii Virtuale Scoala365 partener Lectii Virtuale CCD Galați partener Lectii Virtuale

2024 © Lecții-virtuale.ro Toate drepturile rezervate
Termeni   Despre   Contact   Confidenţialitate   Cariere Parteneri