• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Using XenForo's Preview Tooltip

James

Well-known member
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:
HTML:
<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:
Code:
<xen:include template="preview_tooltip" />

This will result in this:
preview tooltip.webp

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!)
 
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?
 
Top Bottom