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 }

How do I change this code so that rather than groups, it can be used for individual users?

Hello jarn,
Try adding this code to your CSS. Just be sure to change the "#" in the "u#" to the user number. You can find this number by clicking their profile and you can see it after your domain there should be a "/u#" and just copy that number and replace the "#" in the code and click save. If this doesn't work, let me know so I can make some adjustments!

Code:

a[href="u#"] 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 }

Hope this helps!


-Jad

Nothing happened, unfortunately.

Did you change the u# part?

Yes.

jarn wrote:Yes.

Hello Jarn,
Could you please provide us the code that you used so we can see if something went wrong with the code I provided you?

-Jad

Also, you didn't remove the "u" did you? Only replace the "#"

Code:

a[href="u1"] strong:hover:after {
  content:"HEAD ADMIN";
  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:#006E8A"] strong { position:relative }

Jadster, you forgot to modify the last Rule's selector :

Code:

a span[style="color:#006E8A"] strong { position:relative }

I'll place it at the top so it's easier to find :

You can add it to your sheet too, jarn.

Code:

a[href="/u1"] span strong { position:relative }
a[href="/u1"] span strong:hover:after {
  content:"HEAD ADMIN";
  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;
}

That rule helps keep the caption, or "tooltip" bound to the username. If the name is not Relative the tooltip will go to the edge of the screen.

Oh ok! Thank you so much Ange! I completely missed over that.

-Jad

Thanks, it works now!

Solved => Archived