1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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

Discussion in 'Development Tutorials [Archive]' started by James, Sep 15, 2011.

  1. James

    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:
    <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:
    preview tooltip.png

    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!)
    bluehuge, Fuhrmann, dieketzer and 2 others like this.
  2. Ferron

    Ferron New Member

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

    nrep Well-Known Member

    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?
  4. Fuhrmann

    Fuhrmann Well-Known Member

    nrep likes this.
  5. nrep

    nrep Well-Known Member

    Fuhrmann likes this.

Share This Page