Efeito descrição dos grupos em hover

• Descrição:

Olá, estou aqui para pedir ajuda de vocês, um código CSS que aparece a legenda dos grupos quando passamos o mouse por cima igual aqui no forumeiros.
Tem como ?
Ou o código é exclusivo daqui?

• Informações:

a[href="/g21-admineiros"] {
   position: relative;
}

#main-content > p > em > b > a[class="gensmall"][href="/g21-admineiros"]:hover:after {
   background-color: rgba(255,66,0,0.5);
   border-radius: 5px;
   bottom: 15px;
   color: #fff;
   content: "Gestão administrativa e técnica do fórum";
   display: inline-block;
   font-size: 10px;
   font-style: normal;
   font-weight: 700;
   left: -75px;
   padding: 2px;
   position: absolute;
   white-space: nowrap;
   z-index: 1;
}

Código:

#main-content > p > em > b > a[class="gensmall"][href="/g11-ajudeiros"]{
position:relative
}
#main-content > p > em > b > a[class="gensmall"][href="/g11-ajudeiros"]:hover:after{
background-color:rgba(130,93,0,0.5);
border-radius:5px;
bottom:15px;
color:#fff;
content:"Suporte no atendimento aos usuários";
display:inline-block;
font-size:10px;
font-style:normal;
font-weight:700;
left:-70px;
padding:2px;
position:absolute;
white-space:nowrap;
z-index:1
}

Código:

#main-content > p > em > b > a[class="gensmall"][href^="/g3"],
a[href^="/u"] span[style^="color"] strong {
  position: relative
}
#main-content > p > em > b > a[class="gensmall"][href^="/g3-"]:hover:after,
a[href^="/u"] span[style*="#00EB2F"] strong:hover:after {
    background-color: rgb(0, 0, 0, 0. 5);
    border-radius: 2px;
    bottom: 15px;
    color: #fff;
    content: "Seu texto aqui";
    display: inline-block;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    left: -60px;
    padding: 3px;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}


Código:

span[style*="#00EB2F"]

Código:

content: "Seu texto aqui";