CSS Tooltip. Instrumente săgeți. Săgetă jos. Exemplu explicat. Proprietatea border-width. Săgetă sus.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
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: