Using XenForo's Preview Tooltip

[James]

This add-on will cover a very simple use of XenForo's preview tooltip (the tooltip that appears over threads when you hover over them). For this tutorial, we'll simply create a link to the logged in user's member card that loads in the preview tooltip on hover.

Step 1: Open up the forum_list template

Step 2: Add (at the very bottom of the template), the following code:

<a href="{xen:link members, $user}" class="PreviewTooltip" data-previewurl="{xen:link full:members/card, $user}">{$user.username}</a>

Now let me explain this code.
The href just builds the link to the member's profile.
The class of PreviewTooltip (note the uppercase on both letters which in XF means it's a JS function) initiates the tooltip.
The data-previewurl is the URL that's loaded, which is the full link to the member's member card.

Once we've done that, we need to include the HTML for the PreviewTooltip to load, so underneath the HTML code we need to add:

<xen:include template="preview_tooltip" />

This will result in this:


Note: Check the HTML source code of anywhere you wish to add this to see if the preview tooltip is already included (example would be the thread_list template).

Hope this helps!

To sum this tutorial up: You need a hyperlink with a class of PreviewTooltip and a data-previewurl that points to a full URL, plus the preview_tooltip template included (if it isn't already).

(P.S: No, I'm not female and yes, I know it's a cute drawing!)

 

[Ferron]

I can see a lot of awesome tooltips coming from this. Great job figuring this out.

 

[nrep]

Thanks for posting this . Do you know how I can create a unique URL for each member, as I'm trying to display a custom profile field using this method - but I can't figure out a way to do this. Is there a way I can create a page for each member URL, similar to the thread preview URL, as that should work?

 

[Fuhrmann]

Thanks for posting this . Do you know how I can create a unique URL for each member, as I'm trying to display a custom profile field using this method - but I can't figure out a way to do this. Is there a way I can create a page for each member URL, similar to the thread preview URL, as that should work?

You can use this tutorial: http://xenforo.com/community/threads/how-to-add-more-actions-to-an-existing-controller.11202/

 

[nrep]

You can use this tutorial: http://xenforo.com/community/threads/how-to-add-more-actions-to-an-existing-controller.11202/

Thanks! I'm not a very good coder, but I will try and work through the tutorial