XF 2.2 Need help adding Tool-tips /title hover effect to Profile Tab Links

oO5 Dynasty

Well-known member
Would Like to give each font awesome Icon a Title hover description. Right now when I hover over them, it doesn't do anything.
Web capture_2-1-2022_124736_user.oo5dynasty.com.webp
 
You can add title="whatever" attributes to your <xf:fa> tags.
I forgot to mention, I changed the text to font awesome icons using Phrases. I didn't add the font awesome code to the members_view template.
Assuming the Members_view template is the one I'm supposed to edit.
So I do not know which template to edit in order for me to add title="whatever"
!screen.webpWeb capture_2-1-2022_162129_user.oo5dynasty.com.webp

1641158973138.webp
 
In this case, you can add title attributes to the <i> tag of your phrases.
Wow, I did not know you could do that. Pretty amazing!
I do have another question, How would I go about adding this into a template. Would I be editing the member_view template?
Also, I do not know how to read the coding in the templates yet, so where would I find the Links? The look of the browser inspects mode compared to the xf templates is different.

Code:
<a href="/index.php?members/oo5-dynasty.1/trophies" class="tabs-tab" id="trophies" role="tab"><i class="fas fa-award"></i></a>

I can understand this code from browser inspect, but when I open Xf templates the code doesn't look like this.
 
I do have another question, How would I go about adding this into a template. Would I be editing the member_view template?
Generally, yeah. Though per your specific example, there is no trophies tab by default so it depends where that comes from.

For profile posts, the tab link looks like this:
HTML:
<a href="{{ link('members', $user) }}" 
    class="tabs-tab is-active" 
    role="tab" 
    aria-controls="profile-posts">{{ phrase('profile_posts') }}</a>

In templates, you should use the <xf:fa> tag instead of using <i> directly. For example, something like:

HTML:
<a href="{{ link('members', $user) }}" 
    class="tabs-tab is-active" 
    role="tab" 
    aria-controls="profile-posts"><xf:fa icon="fa-comments" title="{{ phrase('profile_posts')|for_attr }}" /></a>
 
Generally, yeah. Though per your specific example, there is no trophies tab by default so it depends where that comes from.

For profile posts, the tab link looks like this:
HTML:
<a href="{{ link('members', $user) }}"
    class="tabs-tab is-active"
    role="tab"
    aria-controls="profile-posts">{{ phrase('profile_posts') }}</a>

In templates, you should use the <xf:fa> tag instead of using <i> directly. For example, something like:

HTML:
<a href="{{ link('members', $user) }}"
    class="tabs-tab is-active"
    role="tab"
    aria-controls="profile-posts"><xf:fa icon="fa-comments" title="{{ phrase('profile_posts')|for_attr }}" /></a>
ahhhhhhhhhhhhh I see I see. Thank you for this!
Happy So Excited GIF by TikTok
 
Top Bottom