Navbar Profile Tooltip Options

[Ace 1Valued Member]

This is just some small thing I made for the Profile link in the navbar. It gives a little tooltip with an extra option to view the profile.




Administration Panel > Modules > HTML & JS > JS codes management > Create a new javascript

Title: Navbar Profile Tooltip
Placement: In all the pages

Code:

Code:

$(function() {
  var lang = {
      profile_options: 'Profile Options',
      view_profile: 'View Profile',
      edit_profile: 'Edit Profile'
    },

    // -1 no default
    // 0 view profile default
    // 1 edit profile default
    default_path = 1,

    id = '/u' + _userdata.user_id,
    link = $('.navbar .mainmenu').filter(function() {
      return /\/profile\?mode=editprofile/.test(this.href)
    }),

    fm_profile_options = [];

  default_path == 1 ? '' : default_path == 0 ? link.attr('href', id) : link.removeAttr('href');

  link.tooltipster({
    animation: 'fade',
    interactive: true,
    contentAsHTML: true,
    minWidth: 150,
    maxWidth: 200,
    delay: 100,
    theme: 'tooltipster-default',
    arrowColor: "#EEE",
    autoClose: true,
    content: '<h2>' + lang.profile_options + '</h2>',
    functionBefore: function(origin, continueTooltip) {
      continueTooltip();

      if (origin.data('ajax') !== 'cached') {
        if (fm_profile_options[0] != undefined) {
          origin.tooltipster('content', fm_profile_options[0]).data('ajax', 'cached');
        } else {
          var URL = $(this).attr('href'),

            container = $('<div>' +
              '<div class = "fm_profile_options" > ' +
                '<h2 class="fm_profile_options_header">' + lang.profile_options + '</h2>' +
                (/\/u\d+/.test(URL) ? '' : '<p class="fm_view_profile"><a href="' + id + '">' + lang.view_profile + '</a></p>') +
                (/\/profile\?/.test(URL) ? '' : '<p class="fm_edit_profile"><a href="/profile?mode=editprofile">' + lang.edit_profile + '</a></p>') +
              '</div>' +
            '</div>');

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

  $('head').append(
    '<style type="text/css">' +
      '.mainmenu.tooltipstered { cursor: pointer; }' +
      '.fm_profile_options { font-family: Arial; font-size: 12px; margin-bottom: 5px; text-align: center; }' +
      '.fm_profile_options_header { font-size: 1.5em; margin: .66em .25em; }' +
      '.fm_profile_options p { margin: 3px; }' +
    '</style>'
  );
});

Here are some modifications:

lang - This is just the text that appears inside the tooltip.

Code:

  var lang = {
      profile_options: 'Profile Options',
      view_profile: 'View Profile',
      edit_profile: 'Edit Profile'
    },

default_path - This determines what link is followed when the user clicks "Profile" within the navbar.

Code:

    // -1 no default
    // 0 view profile default
    // 1 edit profile default
    default_path = 1,

Hope you guys like it; I have some more tutos on the way

Credits to Ange's group preview tutorial for giving me something to work with.