1. 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?

Discussion in 'Styling and Customization Questions' started by rafass, May 23, 2015.

  1. rafass

    rafass Well-Known Member

    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!
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    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.
     
  3. rafass

    rafass Well-Known Member

    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!
     
  4. rafass

    rafass Well-Known Member

    Last edited: May 24, 2015
  5. Brogan

    Brogan XenForo Moderator Staff Member

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

    Chris D XenForo Developer Staff Member

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

    rafass Well-Known Member

    Is weird, I'm trying to do that but it doesn't give me the tooltip.
    aaa1.gif
     
  8. Chris D

    Chris D XenForo Developer Staff Member

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

    rafass Well-Known Member

    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!
     

Share This Page