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.)

 

Folytatása következik!