How to display a users user group when hovered over?

[Ramdaman]

Is there a way if you hover over a users name, that the displayed group that user is in will show in text by your cursor? Thanks.

[Ange Tuteur]

Hello Ramdaman,

You can use the following trick with CSS :
Display > Colors > CSS stylesheet

Code:

a span[style="color:#990099"] strong:hover:after {
  content:"Moderator";
  font-size:10px;
  color:#000;
  background:#FFF;
  border:1px solid #EEE;
  box-shadow:1px 1px 2px #000;
  border-radius:4px;
  padding:3px;
  position:absolute;
  bottom:5px;
  right:0px;
  display:inline-block;
  white-space:nowrap;
  z-index:1;
  margin:-25px;
}
a span[style="color:#990099"] strong { position:relative }

So it applies to the group you want it to, you must change #990099 to the color of your group. You can see the hex color of your groups here :
Administration Panel > Users & Groups > Groups > Group Administration

The last thing to change is the texts displayed : content:"Moderator"; Change Moderator to the texts you want to display.

To have it for multiple groups simply repeat the steps above.

[Ramdaman]

Ah solved, so I must keep every group color different for this to work?

[Ange Tuteur]

Correct, you will need multiple codes. You can also put the content in its own rule and add the selectors to the popup style so it takes less space. However, I think multiple codes will be easier if you're not familiar with CSS.

[Ramdaman]

Not familiar with CSS, so this will do. Thanks again mam.

[Ange Tuteur]

You're welcome ^^

Topic archived

With multiple codes you can also personalize the style of each group tooltip. ( e.g. background color, font color.. )