CSS Tooltip. Instrumente de poziționare. Tooltip dreapta. Tooltip stânga. Tooltip de sus. Tooltip de jos.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Î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: