23.9. fejezet: CSS alapismeretek – Egérfeliratok
Ezt a megoldást elég ritkán használják a weblapok, de időnként szükség lehet rá. Ismét kezdjük egy egyszerű példával! Az alábbi kód egy sima feliratot ad ki az adott menőhöz, ha az egér fölé kerül: (htmlpelda52.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="hu">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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;
/* Egérfelirat pozíciója */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style></head>
<body style="text-align:center;">
<div class="tooltip">Egérrel jöjjön ide!
<span class="tooltiptext">Egérfelirat szövege</span>
</div>
<p>Megjegyzés: nem a legjobb a felirat helyzete, ezen érdemes finomítani!</p>
</body>
</html>
Ha jobb oldalra akarjuk állítani az egérfeliratot, akkor érdemes a következő kódrészletet használni:
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Ugyanez a bal oldalra:
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Valamint a tetejére:
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Csak javasolt érték! */
}
Végül az aljára:
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
Ha a fenti feliratokat egy aprócska kis nyíllal is szeretnénk fűszerezni, akkor a ::after osztályt kell használni. Minta:
.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;
}
Megjegyzés: a többi irány hasonlóan működik.
A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_tooltip.asp
(További példákkal.)
- << Előző
- Következő