Public
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Champion

Rank Titles - Adding Hover Text

Hello, 

Has anyone found a way to add a simple piece of hover text to the rank title on a profile page. We have a geographic theme set of rank titles and occasionally people think this is their physical location being displayed and want to try and change it. 

See this screenshot where I've indicated an example rank title with a green arrow. This is a peak in Venezuela for anyone who is wondering. 😁

RankTitle.png

I am wondering if it might be helpful to either use hover text for this field on the My Profile Page which says 'This is your current Community Rank' or maybe add a fixed text field before the element on the page which says Your Current Community Rank: [Community Rank]. 

Anyone had this issue before and have any insight into ways to fix this with hover text or adding some hard code text before the rank display field on the Profile Page?

TIA

Senior Community Manager | Strava
https://communityhub.strava.com
9 Replies 9

What's your percentage of mobile users @elbranscomb? I wonder whether you might try to come up with another solution as hover text is only useful for desktop users and not accessible...

Jason

 

Generic1.jpg

Boss

@elbranscomb 
It can be done easily using a custom code. I have done it at some places. 
@JasonHill For mobile, a tooltip can be be added uisng an indicator. 

Give kudos if you find my posts helpful or mark solution if it answers your query

Thanks Jason, maybe adding some prefix text then such as Your Community Rank: . Might need to check if that works in the mobile UI with our longest rank title. 

Senior Community Manager | Strava
https://communityhub.strava.com

Thanks @VikasB , are you able to share what custom code you used? I was wondering if a text key could be added to that element which then displays the Info/Question icon that could be tapped in mobile to display the custom text key explaining this. It might be more subtle than hard-coding prefix text before the rank title. 

Senior Community Manager | Strava
https://communityhub.strava.com
Boss

@elbranscomb 

You can try this one. Need to add this on profile page.  

 

 

const rankElement = document.getElementsByClassName("lia-user-rank lia-component-user-rank");
rankElement[0].title = "This is your community rank";

 

 

A custom tooltip can also be added to beautify this. And a text key can also be used instead of this hard coded text. 

Screenshot 2022-09-19 at 10.10.15 PM.png

 

Give kudos if you find my posts helpful or mark solution if it answers your query

Wow thanks for sharing this. When you say add to profile page do you mean add to the CSS for the page in the skin or add this as a custom component and add that to the profile page?

Senior Community Manager | Strava
https://communityhub.strava.com

@elbranscomb 

  1. Create a custom component 
  2. Add below code in that component 

 

<@liaAddScript>
    ;(function($) {
        $(document).ready(function() {
            const rankElement = document.getElementsByClassName("lia-user-rank lia-component-user-rank");
            rankElement[0].title = "This is your community rank";
        });
    })(LITHIUM.jQuery);
</@liaAddScript>​

 

3. Add this component to the profile page 

Studio > Page >Select Page(View Profile Page) > Add component anywhere on this profile page

4. Save your changes and check the profile page. 

Give kudos if you find my posts helpful or mark solution if it answers your query

This worked perfectly, thank you for the detailed explanation. I had to wait for some other stage work to complete before trying this so apologies for my delay in getting back to you. 

Senior Community Manager | Strava
https://communityhub.strava.com

@elbranscomb 
Welcome, you can tag me in case you need any help in Khoros development i.e. Standard or customized. 
Keep shining your community 🙂

Give kudos if you find my posts helpful or mark solution if it answers your query

Welcome to the Technology board!

Curious about our platform? Looking to connect on social technology? You've come to the right place!

Are you a Khoros customer? For direct assistance from our Support team, please visit the Support Forum.