Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[CSS] Tooltip on Username



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Shadow

avatar
Administrator
Administrator


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



- 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
    }


- Preview





© PunBB Design


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

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

2
Offline

  Udarsha45

avatar
Punbb Rookie
Punbb Rookie
thanks

Powered by PunBB
Currently 0 users have thanked Udarsha45 for this post:

3
Offline

  Guest

avatar
Guest
Awesome tutorial, thank you.

Powered by PunBB
Currently 0 users have thanked Guest for this post:

4
Offline

  Hancki

avatar
Punbb Rookie
Punbb Rookie
Well, thanks for your support.

Powered by PunBB
Currently 0 users have thanked Hancki for this post:

5
Offline

  Hassan Sayed

avatar
Newbie
Newbie
Thanxe

Powered by PunBB
Currently 0 users have thanked Hassan Sayed for this post:

6
Offline

  Srz

avatar
Punbb Rookie
Punbb Rookie
Thanks for this Code

Powered by PunBB
Currently 0 users have thanked Srz for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum