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

[rafass]

I want to insert a Tooltip here:

<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:

class="OverlayTrigger Tooltip" title="{xen:phrase my_own_phrase}"

How is the trick? thanks!

 

[Chris D]

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]

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:

<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. Thank you!

 

[rafass]

You can see it in action here: https://foro.io/t/727/

 

[Paul B]

Questions related to add-ons should be posted in the dedicated thread.

 

[Chris D]

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]

Is weird, I'm trying to do that but it doesn't give me the tooltip.

 

[Chris D]

Did you add that in the template or in the Element Inspector in the browser?

 

[rafass]

upss, you're right. is working!
This is the template now:

<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:

Thank you Chris!