[CSS] Tooltip on Username

Tutorial: Tooltip on Username

Same thing we are using here on Punbb.biz, when you mouseover the username you see what rank user have.

Credit goes to @Hancki

--> Tutorials, tips and tricks <--
Tooltip on Username

1º - CSS
Add the following code to the CSS Stylesheet:

Code:

[panda=css]    a[href*="/u"] span[style="color:#FF0000"] strong {  /* Change FF0000 with your group color code. */
       position:relative;
    }
    a[href*="/u"] span[style="color:#FF0000"] strong:hover:after{ /* Change FF0000 with your group color code. */
       background-color:rgba(0,0,0,0.5);
       border-radius:5px;
       bottom:15px;
       color:#fff;
       content:"text appears when someone moouseover the username";
       display:inline-block;
       font-size:10px;
       font-style:normal;
       font-weight:700;
       left:-90px;
       padding:2px;
       position:absolute;
       white-space:nowrap;
       z-index:1
    }

2º - Preview

---

© PunBB Design

If you have any questions related to this topic create a topic with the following title: Tooltip on Username

thanks

Awesome tutorial, thank you.

Well, thanks for your support.

Thanxe

Thanks for this Code