Display a preview of the user profile on hover

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.

Thanks for this amazing tutorial. I can tell you that this does not effect the tutorial about the pop up profile.

SLGray wrote:Thanks for this amazing tutorial. I can tell you that this does not effect the tutorial about the pop up profile.

Good to hear !

I think everything should be good, however if you do notice any problems or conflictions let me know.

I noticed that it does not work in profiles in messages that have the reputation bars. I mean the tutorial you created for the reputation bars.

Hmm.. I took a look over the scripts. I think it might be the profile background one because it's rewriting the innerHTML. Try replacing the preview script with this one :

Code:

$(function(){$(function(){
  var links = $('a[href^="/u"]'),
      usersinfo = {};
 
  links.tooltipster && links.not('.mentiontag, .tooltipstered').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');
            }
          });
        }
      }
    }
  });
})});

This'll delay the execution of the script by placing it into another queue. That should help it apply the tooltip to the profiles ( and maybe some other places that are generated via scripts ).

The new JavaScript works like a charm.  Thanks.

Nice code Keep Up the good work

@Ape thanks !

I'm always trying to think of neat plugins and ways to improve the forums.

Neat tutorial, implemented it to my forum. Thanks!

Works great!

How do I style it to a gray color?

Nemesis wrote:How do I style it to a gray color?

Add this to your CSS:

Code:

.tooltipster-content  {background:grey;}
.tooltip-actions {background:grey!important;}

hello the hover is hidden the username, see below the problem photo1 
and then see the right one with the hover over the name photo2
http://iconskouliki.forumgreek.com/
punbb


photo1



photo2


thank you

@skouliki the problem is the 30px margin on top of the body. ( it's added by the toolbar ) Add this CSS rule to your stylesheet and it should fix the problem :

Code:

body {
  margin-top:0 !important;
  padding-top:30px;
}

yes now its ok.. thank you for your time

When I hover over a certain profile link, it works one time alone. Like it doesn't stay cached.

And the following are tooltipstered when I don't want them to be:

• tabs in a user's profile
• postprofile images

Can you help me with this @Ange Tuteur

@Ace 1 give this a try and let me know if it works :

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');
            }
          });
        }
      }
    }
  });
});

@Ange Tuteur

This works, however the links still don't stay cached.

If you're talking about the caching, the content that's loaded is only cached temporarily. Once you navigate to another page it'll have to load the content again.

Ace 1 wrote:When I hover over a certain profile link, it works one time alone. Like it doesn't stay cached.

@Ange Tuteur No I mean without even refreshing or navigating to another page.

Weird.. it caches on my end. o.O Any console errors ?

Oh of course lol. I put a script in my

Code: mentions_tooltip

template and that was returning an undefined error on the second hover.

It's working now.

Thank you for the tutorial but it does not seem to work on my Phbb3 forum. I copied and pasted all the code and made sure that I activated that one tag username thing and it didn't work. Unless it works on everyone's but mine. I just made a new forum and don't have any members yet so I tried my username and it didn't work.

@universecat Did you make sure that JS codes were enabled?

Yes