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.

thank you for the response So which information do i need to add for displaying a users last visit? I've tried adding it like the code below with USERLASTVISIT but it doesn't seem to work.

Code:


</style>
<div class="main-tooltip">
    <div class="tooltip-content">
        <img src="{USER_AVATAR}" alt="{USER_NAME}" />
        <span class="tooltip-title">{USER_NAME_COLORED}</span>
        <!-- BEGIN switch_rank_info -->
        <span class="tooltip-subtitle">{switch_rank_info.L_RANK}: {switch_rank_info.RANK_TITLE}</span>
        <!-- END switch_rank_info -->
        <ul class="tooltip-counts">
            <li>{L_POSTS}: <b>{POSTS}</b></li>
          <li>{L_USERLASTVISIT}: <b>{USERLASTVISIT}</b></li>
            <li>{L_FRIENDS}: <b>{FRIENDS}</b></li>
        </ul>
    </div>

any help?

bump

Hi again,

It wont be possible via the template ; you'll have to retrieve the data via AJAX while the tooltip is loading. Try using this script :

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;
             

              $.get('/u' + userid + 'stats', function (data) {
                var lv = $('#profile-advanced-details li', data).last()[0];

                if (lv) {
                  usersinfo[userid] = usersinfo[userid].replace('</ul>', '<li>' + lv.innerHTML + '</li></ul>');
                }

                origin.tooltipster('content', usersinfo[userid]).data('ajax', 'cached');
              });
            }
          });
        }
      }
    }
  });
});

Works like a charm! Thanks a lot!

I am so thankful I found this forum. I just tried to use this JavaScript but it didn't work.

I made it just how you described... but it´s the German version of Forumotion, can this be the reason? I've tried to figure out if there are other variables in German. But I have no experience with JavaScript... would be nice if you could help me

My Forum

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."

@Eiki You do this?

Ace 1 wrote:

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."

@Eiki You do this?

Oh, I'm sorry I didn't see that. But it worked! Thank you!

Hi! I tried to use this JavaScript but it didn't work.
i use modernbb
my forum www.depanatorul-tv.com
thx