Display a Preview of Groups on Hover

First topic message reminder :

This plugin displays a preview of groups when you hover over them on the legend, allowing you to quickly view a brief summary of the group.

Click to view demo

Note : For this plugin to work you must have the following option enabled.
Admin Panel > General > Messages > Configuration and enable the options entitled "Allow username tag" and "Activate the preview of profiles on the tag usernames." This plugin is optimized to work on any forum version, so if it doesn't work for you please leave a reply below with the URL to your forum.

Installation

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

Title : Group Preview
Placement : In the homepage
Paste the following code :

Code:

$(function() {
  var max_users = 10, // max number of users

      // language data
      lang = {
        view_group : 'View the full group',
        loading : 'Loading...',
        view_err : 'The group data could not be retrieved.'
      },

      links = $('a[href^="/g"]').filter(function() {
        if (/\/g\d+-/.test(this.href)) {
          return this;
        }
      }),

      groupsinfo = {};

  links.tooltipster && links.not('.tooltipstered').tooltipster({
    animation : 'fade',
    interactive : true,
    contentAsHTML : true,
    minWidth : 300,
    maxWidth : 300,
    delay : 500,
    theme : 'tooltipster-default',
    arrowColor : "#EEE",
    autoClose : true,
    content : lang.loading,
    functionBefore : function(origin, continueTooltip) {
      continueTooltip();

      var groupURL = $(this).attr('href'),
          groupId = groupURL.replace(/.*?\/g(\d+).*/, '$1'),
          groupName = $(this).text();

      if (origin.data('ajax') !== 'cached') {
        if (groupsinfo[groupId] != undefined) {
          origin.tooltipster('content', groupsinfo[groupId]).data('ajax', 'cached');
        } else {
          $.get(groupURL, function(d) {
            var user = $('form[action="' + groupURL + '"] a[href^="/u"]', d),
                i = 0,
                li,
                container = $('<div>'+
                  '<div class="fa_group_preview">'+
                    '<h2 class="fa_group_name">' + groupName + '</h2>'+
                    '<p class="fa_group_desc">' + $('form[action^="/g"]', d).find('dl:eq(1) dd, tr:eq(2) td.row2 .gen').text() + '</p>'+
                    '<ol class="fa_group_list"></ol>'+
                    '<div class="fa_group_button">'+
                      '<a href="' + groupURL + '" class="button1">' + lang.view_group + '</a>'+
                    '</div>'+
                  '</div>'+
                '</div>');

            for (; i < max_users; i++) {
              if (user[i]) {
                li = document.createElement('LI');
                li.appendChild(user[i]);
                $('ol', container).append(li);
              }
            }

            if (!$('li', container).length) {
              $('ol', container).after('<div>' + lang.view_err + '</div>');
            }

            groupsinfo[groupId] = container.html();
            origin.tooltipster('content', groupsinfo[groupId]).data('ajax', 'cached');
          });
        }
      }
    }
  });

  $('head').append(
    '<style type="text/css">'+
      '.fa_group_preview { font-family:Arial; font-size:12px; color:#000; }'+
      '.fa_group_preview a { text-decoration:none; }'+
      'h2.fa_group_name { font-size:24px; }'+
      'p.fa_group_desc, h2.fa_group_name { margin:10px 0 10px 0; }'+
      'ol.fa_group_list { margin:0 25px; padding:0; }'+
      '.fa_group_button { margin-top:10px; text-align:center; }'+
    '</style>'
  );
});


Modifications
If you want to make any modifications to this plugin, please click the spoiler below to reveal the instructions.

Click to view modifications:

Once you're finishing making modifications, save the script and the plugin will be installed. Now when you hover the group links on the homepage, a preview of the group should pop up !

If you have any comments, questions, or problems, feel free to leave a reply below. Enjoy !

Notice

Tutorial written by @Ange Tuteur. Special thanks to Samantha for the idea and to the Beta Testers for testing this plugin. Reproduction not permitted without consent from the author.

@NeonSynth try the following script instead.

Code:

$(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t1030-display-a-preview-of-groups-on-hover#21553';
 
  var max_users = 10, // max number of users
 
      // language data
      lang = {
        view_group : 'View the full group',
        loading : 'Loading...',
        view_err : 'The group data could not be retrieved.'
      },
 
      links = $('a[href^="/g"]').filter(function() {
        if (/\/g\d+-/.test(this.href)) {
          return this;
        }
      }),
 
      groupsinfo = {};
 
  links.tooltipster && links.not('.tooltipstered, a[href^="/g1-"], a[href^="/g2-"]').tooltipster({
    animation : 'fade',
    interactive : true,
    contentAsHTML : true,
    minWidth : 300,
    maxWidth : 300,
    delay : 500,
    theme : 'tooltipster-default',
    arrowColor : "#EEE",
    autoClose : true,
    content : lang.loading,
    functionBefore : function(origin, continueTooltip) {
      continueTooltip();
 
      var groupURL = $(this).attr('href'),
          groupId = groupURL.replace(/.*?\/g(\d+).*/, '$1'),
          groupName = $(this).text();
 
      if (origin.data('ajax') !== 'cached') {
        if (groupsinfo[groupId] != undefined) {
          origin.tooltipster('content', groupsinfo[groupId]).data('ajax', 'cached');
        } else {
          $.get(groupURL, function(d) {
            var user = $('form[action="' + groupURL + '"] a[href^="/u"]', d),
                i = 0,
                li,
                container = $('<div>'+
                  '<div class="fa_group_preview">'+
                    '<h2 class="fa_group_name">' + groupName + '</h2>'+
                    '<p class="fa_group_desc">' + $('form[action^="/g"]', d).find('dl:eq(1) dd, tr:eq(2) td.row2 .gen').text() + '</p>'+
                    '<ol class="fa_group_list"></ol>'+
                    '<div class="fa_group_button">'+
                      '<a href="' + groupURL + '" class="button1">' + lang.view_group + '</a>'+
                    '</div>'+
                  '</div>'+
                '</div>');
 
            for (; i < max_users; i++) {
              if (user[i]) {
                li = document.createElement('LI');
                li.appendChild(user[i]);
                $('ol', container).append(li);
              }
            }
 
            if (!$('li', container).length) {
              $('ol', container).after('<div>' + lang.view_err + '</div>');
            }
 
            groupsinfo[groupId] = container.html();
            origin.tooltipster('content', groupsinfo[groupId]).data('ajax', 'cached');
          });
        }
      }
    }
  });
 
  $('head').append(
    '<style type="text/css">'+
      '.fa_group_preview { font-family:Arial; font-size:12px; color:#000; }'+
      '.fa_group_preview a { text-decoration:none; }'+
      'h2.fa_group_name { font-size:24px; }'+
      'p.fa_group_desc, h2.fa_group_name { margin:10px 0 10px 0; }'+
      'ol.fa_group_list { margin:0 25px; padding:0; }'+
      '.fa_group_button { margin-top:10px; text-align:center; }'+
    '</style>'
  );
});

In the script I added these selectors to the NOT sequence.

Code:

a[href^="/g1-"], a[href^="/g2-"]

Change the numbers in these selectors ( 1, 2.. ) so that they match the id of the groups you want to exclude from the script. You can see the id of a group by going to the group page and looking at the address bar in your browser.


If any questions just let me know.

@Ange Tuteur Thanks, exactly what I've been looking for! ^_^ One thing tho, I have trouble editing the color of the "View the full group" text thingy on the end of the script, if it is there. It's barely visible on the white background of the popup. Either that or how do I change the background color of the pop-up? (the latter would be better)

CSS:

Code:

.tooltipster-content {background-color:#EEE}

or any other HEX color code you like.

1) For just the button:

Code:

.fa_group_preview a.button1 {background-color: #000000; color: red !important; }

"View the full group" text is red with this code, change it however you like!

2) The code provided by @Samantha NL will change the bg of all the popups of the forum, try this code to just change the bg of the preview of groups:

Code:

.tooltipster-base .tooltipster-content .fa_group_preview {background-color: #130601 !important; padding: 5px;}

Test it!

Thank you guys for being helpful, I appreciate it! Works perfectly now as it should.

I've got a question about this plug-in. We've decided to hide the groups list to guests (ACP user setting), currently displaying as http://prntscr.com/dy2h3s. We'd like to have the 'View All Members' button hidden from view to guests and add a custom message for them, something in the order of: 'Group members can only be viewed when logged in'. Could anyone please have the original code changed for us and have it updated with that? Thanks.

Very cool , thank you .