• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 How to insert a Tooltip in this piece of template?

rafass

Well-known member
#1
I want to insert a Tooltip here:
Code:
<xen:set var="$moodImageUrl">{xen:if "{$user.mood_id}", {$moods.{$user.mood_id}.image_url}, {$moods.{$defaultMoodId}.image_url}}</xen:set>
I need to insert something like:
Code:
class="OverlayTrigger Tooltip" title="{xen:phrase my_own_phrase}"
How is the trick? thanks!
 

Chris D

XenForo developer
Staff member
#2
You can't. The first thing is just a URL that is used somewhere. You would likely need to find where the {$moodImageUrl} variable is used and modify the element where that is used to add the Tooltip class and title attribute.
 

rafass

Well-known member
#3
Hello Chris!
is the addon called XenMoods
The normal behaviour is that you can choose your own mood hovering the image. You will see a tooltip called "mood chooser" but hovering others it will not show anything.
So, I would like to put there a tooltip called "Mood"
This is the template:
Code:
<xen:if is="{$canViewMoods}">
    <xen:require css="mood_display.css" />

    <xen:set var="$moodImageUrl">{xen:if "{$user.mood_id}", {$moods.{$user.mood_id}.image_url}, {$moods.{$defaultMoodId}.image_url}} </xen:set>

    <div class="userMood">
        <xen:if is="{$visitor.user_id} == {$user.user_id} && {$canHaveMood}">
            <a href="{xen:link moods/mood-chooser, '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase mood_chooser}" data-cacheOverlay="false" data-offsetY="-8">
                <img src="{$moodImageUrl}" alt="{$moods.{$user.mood_id}.title}" />
            </a>
        <xen:else />
            <img src="{$moodImageUrl}" alt="{$moods.{$user.mood_id}.title}" />
        </xen:if>
    </div>
</xen:if>
Any idea? I'm lost.:coffee: Thank you!
 

Chris D

XenForo developer
Staff member
#6
Just add the Tooltip class and a title that you want on the element that you want the tooltip to appear on. It's just as simple as that, really.
 

rafass

Well-known member
#9
upss, you're right. is working! (y)
This is the template now:
Code:
<xen:if is="{$canViewMoods}">
    <xen:require css="mood_display.css" />

    <xen:set var="$moodImageUrl">{xen:if "{$user.mood_id}", {$moods.{$user.mood_id}.image_url}, {$moods.{$defaultMoodId}.image_url}}</xen:set>

    <div class="userMood Tooltip" title="{xen:phrase mood_chooser}">
        <xen:if is="{$visitor.user_id} == {$user.user_id} && {$canHaveMood}">
            <a href="{xen:link moods/mood-chooser, '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger" data-cacheOverlay="false" data-offsetY="-8">
                <img src="{$moodImageUrl}" alt="{$moods.{$user.mood_id}.title}" />
            </a>
        <xen:else />
            <img src="{$moodImageUrl}" alt="{$moods.{$user.mood_id}.title}" />
        </xen:if>
    </div>
</xen:if>
And this is the result: ;)
aaa1.gif
Thank you Chris!