CSS Tooltip. Basic Tooltip.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Creați tooltips cu CSS.
Un tooltip este adesea folosit pentru a specifica informații suplimentare despre ceva când utilizatorul mută indicatorul mouse-ului peste un element.
Basic Tooltip
Creați un tooltip care apare când utilizatorul mută mouse-ul peste un element:
Exemplu:
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Dacă doriți puncte sub textul hoverable */
}
/* Text de tip tooltip */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Poziționează textul tooltip - vezi exemple de mai jos! */
position: absolute;
z-index: 1;
}
/* Afișați textul tooltip când treceți mouse-ul peste tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me
<span class="tooltiptext">Textul de tip tooltip</span>
</div>