Rank Titles - Adding Hover Text

[elbranscomb]

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. 😁

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

[JasonHill]

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

[VikasB]

@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. 

[elbranscomb]

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. 

[elbranscomb]

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. 

[VikasB]

@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. 

[elbranscomb]

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?

[VikasB · Accepted solution]

@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. 

[elbranscomb]

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. 

[VikasB]

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