CSS Tooltip. ​​​​​​​Instrumente săgeți. Săgetă stânga. Săgetă dreapta. Fade în Tooltips (animație).

Susține Lectii-Virtuale!

 ​​​​​​Instrumente săgeți (Tooltip Arrows)

Acest exemplu demonstrează cum se adaugă o săgeată la stânga tooltip-ului:

Săgetă stânga (Left Arrow)

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* La stânga tooltip-ului */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

Rezultat:



Acest exemplu demonstrează cum să adăugați o săgeată la dreapta tooltip-ului:

Săgetă dreapta (Right Arrow)

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

Rezultat:



Fade în Tooltips (animație)

Dacă doriți să aplicați fade în tooltip text când urmează să fie vizibil, puteți utiliza proprietatea CSS transition împreună cu proprietatea opacity și puteți trece de la a fi complet invizibil la 100% vizibil, într-un număr de secunde specificate (1 secundă în exemplul nostru):

Exemplu:

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}