CSS Tooltip. ​​​​​​​Instrumente săgeți. Săgetă jos. Exemplu explicat. Proprietatea border-width. Săgetă sus.

Susține Lectii-Virtuale!

Instrumente săgeți (Tooltip Arrows)

Pentru a crea o săgeată (arrow) care ar trebui să apară dintr-o parte specifică a tooltip-ului, adăugați conținut „empty” după tooltip, cu pseudo-element class ::after împreună cu proprietatea content. Săgeata în sine este creată folosind borders. Acest lucru va face ca tooltip-ul să pară un speech bubble.

Acest exemplu demonstrează cum se adaugă o săgeată în partea de jos a tooltip-ului:

Săgetă jos (Bottom Arrow)

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /*  În partea de jos a tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

Rezultat:



Exemplu explicat

Poziționarea săgeții în interiorul tooltip: top: 100% va așeza săgeata în partea de jos a tooltip. left: 50% va centra săgeata.

Notă: Proprietatea border-width specifică dimensiunea săgeții. Dacă schimbați acest lucru, modificați, de asemenea, valoarea margin-left. Aceasta va menține săgeata centrată.

Border-color este utilizată pentru a transforma conținutul într-o săgeată. Am stabilit top border la negru, iar restul la transparent. Dacă toate părțile ar fi negre, s-ar termina cu o black square box.

Acest exemplu demonstrează cum să adăugați o săgeată în partea de sus a tooltip. Observați că am stabilit de data aceasta bottom border color:

Săgetă sus (Top Arrow)

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /*  În partea de sus a tooltip-ului */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

Rezultat: