Estimado, primero debemos saber varias cosas, lo que tu quieres hacer se llama "Hacer un Tooltip en CSS " .
En la siguiente imagen te dejo como ejemplo un Tooltip:

Pero que es un Tooltip?:
Un tooltip proporciona información extra cuando el usuario pasa el cursor sobre un elemento.
En HTML Como se vería nuestro codigo :
<div class="tooltip top">Posa el ratón encima de mi
<span class="tiptext">Texto del tooltip</span>
</div>
En CSS como se veria nuestro codigo:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 3px;
padding: 6px 0;
position: absolute;
z-index: 1;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.tooltip .tiptext::after {
content: "";
position: absolute;
border-width: 5px;
border-style: solid;
}
.tooltip:hover .tiptext {
visibility: visible;
}
Ahora debes agregar los CSS para las posiciones.
CSS para Tooltip arriba
.tooltip.top .tiptext{
margin-left: -60px;
bottom: 150%;
left: 50%;
}
.tooltip.top .tiptext::after{
margin-left: -5px;
top: 100%;
left: 50%;
border-color: #2E2E2E transparent transparent transparent;
CSS para Tooltip abajo
.tooltip.bottom .tiptext{
margin-left: -60px;
top: 150%;
left: 50%;
}
.tooltip.bottom .tiptext::after{
margin-left: -5px;
bottom: 100%;
left: 50%;
border-color: transparent transparent #2E2E2E transparent;
CSS para Tooltip izquierda
.tooltip.left .tiptext{
top: -5px;
right: 110%;
}
.tooltip.left .tiptext::after{
margin-top: -5px;
top: 50%;
left: 100%;
border-color: transparent transparent transparent #2E2E2E;
CSS para Tooltip derecha
.tooltip.right .tiptext{
top: -5px;
left: 110%;
}
.tooltip.right .tiptext::after{
margin-top: -5px;
top: 50%;
right: 100%;
border-color: transparent #2E2E2E transparent transparent;
si todo esto no te sirvió acá te dejo un link con mas informacion: LINK