Skip to main content
Asked a question 3 months ago

Is there a way to change the description for Reputation, that is shown while hovering the reputation score?

Where am I?

In Tribe you can ask and answer questions and share your experience with others!

Eli Tribe TEAM
Customer Support Manager at Tribe

Hi Philipp, 

Currently, you cannot customize the hover-over messages. 

The message should be neutral and should apply to all use-cases. 

I have added the "feature request" tag to your question to bring it to our product team's attention. 

I know this is old, but I too had wanted to change this. Couldn't find any answers in the Tribe community, so after more time spent then I'd like to admit on learning CSS I figured out how to change it and thought I'd share it with. As far as I can tell, this CSS does not effect any other hover messages, but I could be wrong so keep an eye on that, if you choose to use this. 

div.ui.bottom.center6.popup.transition.visible > span {display: none !important;}
div.ui.bottom.center6.popup.transition.visible:after {content: 'Karma reflects how much goodwill you have contributed to the community' !important;}

You can edit the above code to change the "Karma reflects how much goodwill you have contributed to the community" to be whatever you want. That will be the message within the hover box. 

If you want to change the "Your Reputation" to something else, like I changed it to "Your Karma", you will need to use Javascript. I got this from Viktor here.11 You'll need to enter this in the "code added to the end of <head> tag" box.

window.Tribe = {
	onReady: function(pathname) {
		var elem = document.querySelector('.user-reputation .statistic .label');
		elem.innerHTML = '<span>Your Karma</span>';

Just replace "Your Karma" with whatever you'd like. 

Lastly, If you want to change the "Most Reputable Users" to something else, in my case I changed it to "Karma Leaderboard", You can use this CSS (I don't remember where I got this from).

.users-leaderboard > div > div:nth-child(1) > h5 > span {display: none !important;}
.users-leaderboard > div > div:nth-child(1) > h5:after {content: 'Karma Leaderboard' !important;}

Just change "Karma Leaderboard" to whatever you'd like!

Hope this helps and saves anybody else time who is wanting to make these changes. I spent wayyyy too much time trying to figure out CSS and everything else. Hopefully they just make some native changes in tribe so the use of these various codes are not needed.