Tooltip CSS
Când utilizatorul mută cursorul mouse-ului peste un element, un tooltip CSS poate afișa informații suplimentare despre acesta.
CSS Crearea unui Tooltip de Bază
Un tooltip de bază are două părți, una în HTML și una în CSS, și apare când mouse-ul trece peste un element.
HTML: Adaugă clasa "tooltip" la un element container (precum <div>); trecerea cu mouse-ul peste el este ceea ce declanșează textul tooltip-ului. Acel text se află într-un element inline (precum <span>) care are clasa tooltiptext.
CSS: Pentru că textul tooltip-ului folosește position: absolute, clasa tooltip are nevoie de position: relative. Clasa tooltiptext conține textul propriu-zis, ținându-l ascuns până când un hover îl face vizibil. Acel hover este detectat cu selectorul :hover, care afișează textul când mouse-ul se află peste <div>-ul cu clasa tooltip.
Exemplu
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic CSS Tooltip</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 130px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<h2>Basic Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Poziționarea Tooltip-ului
Un tooltip poate fi pus oriunde dorești. Exemplele de mai jos îl plasează în dreapta, stânga, sus și jos față de elementul peste care se trece cu mouse-ul.
Tooltip aliniat la dreapta
left: 105% pune tooltip-ul în partea dreaptă. Centrarea verticală vine de la top: -5px, care corespunde padding-ului de 5px sus și jos al textului tooltip-ului.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Right Tooltip</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 130px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<h2>Right Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Tooltip aliniat la stânga
right: 105% pune tooltip-ul în partea stângă, iar top: -5px îl centrează din nou vertical.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Left Tooltip</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
cursor: pointer;
margin-left: 200px;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 130px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<h2>Left Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Tooltip aliniat sus
Cu bottom: 100%, tooltip-ul stă deasupra elementului. Jumătate din lățimea sa de 130px (130 / 2 = 65) dă margin-left: -65px, care îl centrează.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Top Tooltip</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 130px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -65px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Tooltip aliniat jos
Cu top: 100%, tooltip-ul stă sub element. Este centrat de margin-left: -65px, jumătate din lățimea sa de 130px (130 / 2 = 65).
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bottom Tooltip</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 130px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -65px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Tooltip cu Apariție Treptată (Fade-in)
O apariție treptată se obține combinând proprietățile CSS transition și opacity. Într-un număr stabilit de secunde (aici, 2), tooltip-ul trece de la complet invizibil (opacity: 0) la complet vizibil (opacity: 1).
Exemplu
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fade-in Tooltip</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 130px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -65px;
opacity: 0;
transition: opacity 2s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<h2>Fade-in Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>