Display a preview of the user profile on hover

First topic message reminder :

This plugin utilizes the preview from the mention tag update, but applies it to all the usernames on the forum. So when you hover a username, you will see a preview of the user's profile.

Click to view demo

Note that for this plugin to work you must have the following option enabled.
Admin Panel > General > Messages > Configuration and enable the option entitled "Activate the preview of profiles on the tag usernames."

Installation

To install this plugin go to Modules > JavaScript codes management and create a new script with the following settings.

Title : Profile preview
Placement : In all the pages

Code:

$(function() {
  var links = $('a[href^="/u"]').filter(function() {
    if (this.firstChild && this.firstChild.tagName) {
      if (this.firstChild.tagName != 'IMG') {
        return this;
      }
    } else {
      return this;
    }
  }),
     
  usersinfo = {};

  links.tooltipster && links.not('.mentiontag, .tooltipstered').filter(function() {
    if (!$(this).closest('#tabs')[0]) {
      return this;
    }
  }).tooltipster({
    animation : 'fade',
    interactive : true,
    contentAsHTML : true,
    minWidth : 300,
    maxWidth : 300,
    delay : 500,
    arrowColor : "#EEE",
    autoClose : true,
    content : 'Loading...',
    functionBefore: function(origin, continueTooltip) {
      continueTooltip();

      var userid = $(this).attr('href').replace(/.*?\/u(\d+).*/, '$1');
      if (origin.data('ajax') !== 'cached') {
        if (usersinfo[userid] != undefined) {
          origin.tooltipster('content', usersinfo[userid]).data('ajax', 'cached');
        } else {
          $.ajax({
            type: 'GET',
            url: "/ajax/index.php",
            dataType: "html",
           
            data: {
              f: "m",
              user_id: userid
            },

            success: function(html) {
              usersinfo[userid] = html;
              origin.tooltipster('content', html).data('ajax', 'cached');
            }
          });
        }
      }
    }
  });
});

When you're finished, save the script and then find a username to hover over. If you see the same preview as the mention tag, then you installed the plugin successfully !

If you have any questions or comments, or the plugin isn't working for you feel free to leave a reply below. Enjoy !

Notice

Tutorial written by Ange Tuteur. Reproduction not permitted without consent from the author.

Forum link?

Ange Tuteur wrote:Note that for this plugin to work you must have the following option enabled.
Admin Panel > General > Messages > Configuration and enable the option entitled "Activate the preview of profiles on the tag usernames."

You do this?

Yeah I did.

Hi @universecat,

When creating the javascript, did you make sure to tick "in all the pages" as the placement ? When I view your forum I see no JavaScript files :


JS files normally appear under the website folder when they're active on the forum. They're yellow with the ".js" extension.


Try editing the script you created and make sure that this option is checked :

I think I did but it won't let me log in so I have the correct username and stuff at home and I'm at school right now so I'll check then. But...im pretty sure I did check it.

Alright, feel free to let us know when you confirm. There's no rush.

Installed. Works fine with Edge.

Sorry for taking so long, I thought I replied back but I guess nowlt. I did check it and made sure, the object is checked.

@Ange Tuteur: Hovering over someone's profile menu items, the preview is still being shown:



Can this behavior in the profile menus be cancelled somehow, please? Thanks in advance.


I don't know if this occurs just in Edge or on our test site, Perhaps someone can confirm? Doesn't seem to happen on FMD btw.

Whoops I fixed that before, but I don't think I updated the code in the first post. Try the script in this post :
https://fmdesign.forumotion.com/t404-display-a-preview-of-the-user-profile-on-hover#23211

I'll also be updating the first post too.

Thanks @Ange Tuteur. It's working now!

@Ange Tuteur: We're not sure if we're going to use the 'Friends:' field in the preview and then I was wondering how to add or change fields in the profile preview, stuff like 'Last Visit:', 'Registration Date:' and 'Reputation:'. It would be nice if we could switch on / off some fields for this plug-in yk and if needed make it translatable ...

@Samantha The

Code: mentions_tooltip

template contains the profile preview tooltip HTML.

TIP:

If you're using this 'Display a preview of the user profile on hover' plug-in on Edge in combination with the '[TIPS & TRICKS] Display Mini-Avatars in the FM Toolbar & Wo's Online List - EDGE' and you don't see the tooltipsters when hovering over the usernames in the Who's Online List, you may want to have a look at this updated code for THIS plug-in made by @Ace 1:

https://fmdesign.forumotion.com/t1210-tips-tricks-display-mini-avatars-in-the-fm-toolbar-and-who-s-online-list-edge#28698

hey i tried your code and it didnt work for what was put at the first topic.

Hi @boatsail,

Please provide the URL of your forum so that I may inspect the issue.

Thank you @Ange Tuteur
How i can deleted Rank in preview please ?

Hi @Haytam,

Go to Admin Panel > Display > Templates > General > mentions_tooltip

Find and remove :

Code:

        <!-- BEGIN switch_rank_info -->
        <span class="tooltip-subtitle">{switch_rank_info.L_RANK}: {switch_rank_info.RANK_TITLE}</span>
        <!-- END switch_rank_info -->

Save and publish.

Ange Tuteur wrote:Hi @Haytam,

Go to Admin Panel > Display > Templates > General > mentions_tooltip

Find and remove :

Code:

        <!-- BEGIN switch_rank_info -->
        <span class="tooltip-subtitle">{switch_rank_info.L_RANK}: {switch_rank_info.RANK_TITLE}</span>
        <!-- END switch_rank_info -->

Save and publish.

work great thank you a lot dude <3 <3

Hello, is it possible to added the last visit time there as well?

Any help?

@HoeGy48, it's possible. Please post your forum's address here.

You can add any new information into the tooltip by modifying the template.
Admin Panel > Display > Templates > General > mentions_tooltip

In regards to what you want added, I'm not sure if there's a template variable for it. If that's the case, your second best option would be to retrieve the data via AJAX when hovering the profile, which would add a second request to the script lowering it's performance a tad, at least when the data isn't cached.