XF 2.2 adding multiple titles to elements within same xf:button

[KSA]

I am trying to add a title for data-sk-follow and another title for data-sk-unfollow but struggled to do that. Here is my code, any advice would be much appreciated

<xf:if is="$user is not empty AND $xf.visitor.canFollowUser($user)">
                <xf:button href="{{ link('members/follow', $user) }}"
                    class="button--link"
                    data-xf-click="switch"
                    data-sk-follow= "addClass:fa-bell,removeClass:fa-bell-slash,"
                    data-sk-unfollow="addClass:fa-bell-slash,removeClass:fa-bell,"
                    class="fa fa-bell {{ $xf.visitor.isFollowing($user) ? 'fa fa-bell-slash': '' }}">
                </xf:button>
      </xf:if>

 

[Orit]

I looking for a similar solution for displaying a dynamic tooltip title for the watch/unwatch thread button (we have an icon instead of text)

Did you figure this out?

Has anyone got an idea?

 

[Orit]

@Jeremy P is there a way to display a dynamic tooltip?

 

[Jeremy P]

You can add titleAttr:sync to the comma delimited options of the data-sk-* attributes. It will set the element's title attribute to the returned text. This is how bookmark buttons work, for example.

 

[Orit]

You can add titleAttr:sync to the comma delimited options of the data-sk-* attributes. It will set the element's title attribute to the returned text. This is how bookmark buttons work, for example.

Thanks!
This is my code:

<a href="{{ link('threads/watch', $thread) }}"
    data-xf-click="switch-overlay"
    data-sk-watch="removeClass:fa-bell-active, titleAttr:sync"
    data-sk-unwatch="addClass:fa-bell-active, titleAttr:sync"
    class="far fa-bell {{ $thread.Watch.{$xf.visitor.user_id} ? 'fa-bell-active' : ''}} "
    data-xf-init="tooltip"
    title="{{ $thread.Watch.{$xf.visitor.user_id} ? phrase('unwatch')|for_attr : phrase('watch')|for_attr }}">
</a>

I think I'm still missing something here as the tooltip title does not change after clicked (it does after a refresh)

 

[Jeremy P]

I see, for watch switches we set the title in the attribute instead of from the response. This works for me, you can adjust as necessary:

<xf:button href="{{ link('threads/watch', $thread) }}"
    fa="fa-bell"
    class="button--link button--iconOnly {{ $thread.Watch.{$xf.visitor.user_id} ? 'fa-bell-active' : '' }}"
    title="{{ $thread.Watch.{$xf.visitor.user_id} ? phrase('unwatch')|for_attr : phrase('watch')|for_attr }}"
    data-xf-init="tooltip"
    data-xf-click="switch-overlay"
    data-sk-watch="removeClass:fa-bell-active, titleAttr:sync, {{ phrase('watch')|for_attr }}"
    data-sk-unwatch="addClass:fa-bell-active, titleAttr:sync, {{ phrase('unwatch')|for_attr }}"
    data-label=".u-srOnly">

    <span class="u-srOnly">
        {{ $thread.Watch.{$xf.visitor.user_id} ? phrase('unwatch') : phrase('watch') }}
    </span>
</xf:button>

Note the label is nested in .u-srOnly so that it doesn't get rendered after the state changes, and it uses the fa attribute for the icon so it continues to work in XF 2.3+.

 

[Orit]

Amazing!
Thank you so much @Jeremy P
I now need to figure out how to make the icon solid, as it doesn't work by simply changing the font-weight
I'll let you know if I need any more help.

Thanks again!