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

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: