Săgeți pentru Tooltip
Bordurile pot desena o săgeată care face ca un tooltip să semene cu un balon de vorbire. Începe cu pseudo-elementul ::after și proprietatea content pentru a plasa conținut gol după tooltip, apoi dă-i forma unei săgeți pe oricare parte alegi.
Săgeată Jos
În acest prim exemplu, săgeata este adăugată pe marginea de jos a tooltip-ului.
Exemplu
Tooltip-ul apare deasupra textului, iar săgeata lui este orientată în jos.
Prompt
Creează un tooltip cu o săgeată jos. Arată un container cu textul "Treci cu mouse-ul peste mine" care dezvăluie un tooltip deasupra cu textul "Text tooltip". Folosește pseudo-elementul ::after pe tooltip pentru a crea o săgeată orientată în jos folosind borduri CSS. Săgeata trebuie centrată în partea de jos a tooltip-ului.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css Tooltip Arrows</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<h2>Bottom Arrow 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>
Exemplu Explicat
Poziția săgeții este setată în interiorul tooltip-ului: top: 100% o pune în partea de jos, iar left: 50% o centrează.
Notă: Dimensiunea săgeții vine de la border-width. De fiecare dată când schimbi această valoare, schimbă și margin-left corespunzător, altfel săgeata nu va mai fi centrată.
Ceea ce transformă conținutul într-o săgeată este border-color: bordura de sus este setată la negru, iar celelalte la transparent. Cu negru pe toate laturile, rezultatul ar fi o cutie pătrată neagră.
Săgeată Sus
Aici săgeata urcă pe marginea de sus a tooltip-ului. Observă că de data aceasta culoarea se pune pe bordura de jos.
Exemplu
Prompt
Creează un tooltip cu o săgeată sus. Arată un container cu textul "Treci cu mouse-ul peste mine" care dezvăluie un tooltip dedesubt cu textul "Text tooltip". Folosește pseudo-elementul ::after pe tooltip pentru a crea o săgeată orientată în sus folosind borduri CSS. Săgeata trebuie centrată în partea de sus a tooltip-ului.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css Tooltip Arrows</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<h2>Top Arrow 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>
Săgeată Stânga
De data aceasta, săgeata este atașată în partea stângă a tooltip-ului.
Exemplu
Prompt
Creează un tooltip cu o săgeată în stânga. Arată un container cu textul "Treci cu mouse-ul peste mine" care dezvăluie un tooltip în dreapta cu textul "Text tooltip". Folosește pseudo-elementul ::after pe tooltip pentru a crea o săgeată orientată spre stânga folosind borduri CSS. Săgeata trebuie centrată vertical pe partea stângă a tooltip-ului.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css Tooltip Arrows</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<h2>Left Arrow 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>
Săgeată Dreapta
Ultima variantă pune săgeata în partea dreaptă a tooltip-ului.
Exemplu
Prompt
Creează un tooltip cu o săgeată în dreapta. Arată un container cu textul "Treci cu mouse-ul peste mine" care dezvăluie un tooltip în stânga cu textul "Text tooltip". Folosește pseudo-elementul ::after pe tooltip pentru a crea o săgeată orientată spre dreapta folosind borduri CSS. Săgeata trebuie centrată vertical pe partea dreaptă a tooltip-ului.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css Tooltip Arrows</title>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 110%;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<h2>Right Arrow 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>