Announcement

Collapse
No announcement yet.

Profile Preview Tooltip (like Name Card but better!)

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Official - Paid Profile Preview Tooltip (like Name Card but better!)

    vBulletin 5 Profile Preview Tooltip modification displays Profile About information and other user info as a tooltip when you click or hover an avatar or username link anywhere across the site.
    • Similar to the new Name Card feature introduced in vB 5.6.6 but this mod is better and has more features.
    • Similar to the thread preview but for profile.
    • It works on both avatar and username and not just on username.
    • Enables the user to quickly get some information about a fellow member (e.g. finding all posts by the user) while in a topic page, topic list or in any page where a profile link is displayed.
    • Supports RTL.
    • Added new options in v1.5
      • Allows you to quickly enable or disable the mod
      • Allows you to set Click or Hover to trigger the Profile tooltip. Defaults to Click.
      • Allows you to set tooltip width, height, font-size and line-height.
      • Allows you to set Usergroups that can use this mod.
    NOTE: For vB 5.6.6 and later, you must disable the Name Card feature to use this mod as these two are similar and redundant.

    Screenshots:
    Click image for larger version  Name:	profile-preview-v1.7.png Views:	7 Size:	96.8 KB ID:	24001

    Click image for larger version  Name:	profile-preview-tooltip-options.png Views:	6 Size:	155.0 KB ID:	24002


    Demo:
    Click the avatar or username anywhere on this site.


    Style Customizations:
    To customize style, add the following custom css in css_additiona.css template in AdminCP or in Sitebuilder > Style > CSS Editor. Adjust the values accordingly.

    To increase tooltip height:
    Code:
    .qtip.ui-tooltip-profile-preview-noypiscripter .qtip-content {
        max-height: 360px;
    }
    To make the avatar bigger/smaller and rounded:
    Code:
    .qtip.ui-tooltip-profile-preview-noypiscripter .b-avatar--m > img {
        max-width: 150px !important;
        max-height: 150px;
        border-radius: 100%;
    }
    To change the background of the tooltip title bar:
    Code:
    .ui-tooltip-profile-preview-noypiscripter .ui-tooltip-titlebar {
        background: #019DCE !important;
        color: #fff;
    }
    To change the color of the View Profile link:
    Code:
    .ui-tooltip-profile-preview-noypiscripter .ui-tooltip-full-profile-noypiscripter {
        color: #fff;
    }
    To change the hover color of the View Profile link:
    Code:
    .ui-tooltip-profile-preview-noypiscripter .ui-tooltip-full-profile-noypiscripter:hover {
        color: #001F68;
    }

    Phrase Translations:
    Update the following phrase variables in the Phrase Manager as needed:
    1. profilepreview_tooltip_profile_preview - Profile Preview (used in the tooltip title bar)
    2. view_profile - View Profile (this is an existing vB5 phrase which is also used in other places)
    3. edit_user - Edit User (appears as tooltip for the Pencil icon; this is an existing vB5 phrase which is also used in other places)

    Version History:

    v1.8
    • Fixed compatibility issue with vB 5.6.6 and older where online status icon says "null is online now" due to missing Display Name feature that was introduced in vB 5.6.7.

    v1.7
    • Added the following to the Profile Preview tooltip:
      • Avatar
      • Username (renders with Username HTML Markup if set)
      • Online/Offline status icon
      • PM/Chat icon
      • Edit User Pencil icon (if has permission)
      • User title
      • User rank
    • Added options to show or hide Online/Offline icon, PM/Chat icon, Edit User icon, User title and User rank
    • Miscellaneous fixes

    v1.6
    • Added Usergroup option to configure the Profile tooltip to only appear for specified usergroups.
    • Fixed text wrapping issue on profile information text in the tooltip.
    • Fixed username link on Who's Online page not showing Profile tooltip due to conflict with existing default tooltip. This mod automatically removes this default tooltip in order for the Profile tooltip to work.
    • Fixed Font-Size and Line-Height mod options not being applied.
    • Miscellaneous fixes
    v1.5
    • Fixed issues as a result of vB5 updates. Added new configuration options to make the mod more flexible and customizable.
    v1.4
    • Fixed wrapping issue when a custom field contains long text without spaces.

    v1.3
    • Compatibility with Last Visitors module by vBMods.rocks when avatars are shown in the module.

    v1.2
    • Fixed issue where preview tooltip was not showing up for users with HTML markup in username as defined in Username HTML Markup setting in Usergroup Manager.

    v1.1
    • Compatibility with vB 5.2.6 to fix stuck "Working..." status indicator issue when hovering a user.

    v1.0
    • Initial version.

    Branding-Free: $30

    Buy Now Add to Cart View Cart

    Need help or not comfortable installing this mod? Purchase the installation service below:

    Product Installation Add-On: $20
    Purchase this product add-on to get professional installation of this mod from us.

    Add to Cart View Cart


    Don't have a PayPal account yet or want to use a new account to purchase this mod? Sign up with PayPal now and get $5 reward!

    Want to pay using Credit/Debit Card? Contact us and we will send you an invoice where you can use your own card.


    For the FREE version with vbmods.rocks branding in the footer, please download the attached ZIP file below.
    Last edited by glennrocksvb; 07-05-2022, 10:51 PM. Reason: Released v1.8
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    I have this installed and working, but the "working" indicator pops up and stays on when the profile preview displays. I tried both the branded free (purchased from you awhile back) version and the version downloadable here, but the same issue occurs.

    Click image for larger version  Name:	profile preview.jpg Views:	1 Size:	143.9 KB ID:	2829

    Comment


    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      I'll look into it. Thanks for reporting.

    #3
    It looks like vBulletin removed the extended easing options from jQuery UI library they are using in vB5. This mod uses a jQuery tooltip plugin that uses easing effect to slide the tooltip. I will check if there's a way for the plugin to not use easing effect.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #4
      Fixed the issue and release v1.1. First post updated.
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #5
        Originally posted by glennrocksvb View Post
        Fixed the issue and release v1.1. First post updated.
        Is there a way to get a branding free module? I paid for one in the past, but I don't mind doing it again since it has been so long.

        Enjoy,
        William

        Comment


        • glennrocksvb
          glennrocksvb commented
          Editing a comment
          I'll send you a branding free version. But have you confirmed the new version is working?

        #6
        Originally posted by glennrocksvb View Post
        I'll send you a branding free version. But have you confirmed the new version is working?
        Yes, works perfectly!

        Enjoy,
        William

        Comment


          #7
          Made another fix and released v1.2.

          William, I PM'd you the branding free version.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


            #8
            Fixed again and release v1.3.
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #9
              Originally posted by glennrocksvb View Post
              Fixed again and release v1.3.
              Works perfectly, Glenn!

              Enjoy,
              William

              Comment


                #10
                Hello.
                Thank you.

                Comment


                  #11
                  How might I adjust the colors of the preview tooltip? I'd like to bring it inline with the rest of our theme and looking through a blob of minified css in your hook template is making my head hurt. Any help would be appreciated.

                  Thanks glenn. Yes, I know I'm annoying.

                  Comment


                    #12
                    Code:
                    /* To change the background of the title bar */
                    .ui-tooltip-profile-preview-noypiscripter .ui-tooltip-titlebar {
                        background: #019DCE !important;
                        color: #fff;
                    }
                    
                    /* To change the color of the Show More link */
                    .ui-tooltip-profile-preview-noypiscripter .ui-tooltip-full-profile-noypiscripter {
                        color: #fff;
                    }
                    
                    ​​​​​​​/* To change the hover color of the Show More link */
                    .ui-tooltip-profile-preview-noypiscripter .ui-tooltip-full-profile-noypiscripter:hover {
                        color: #001F68;
                    }
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                    • glennrocksvb
                      glennrocksvb commented
                      Editing a comment
                      Added this in the first post.

                    • Daryn
                      Daryn commented
                      Editing a comment
                      There's also the White background and Section titles/text. I've got some of that changed and will look further into it tomorrow.

                    • glennrocksvb
                      glennrocksvb commented
                      Editing a comment
                      Most of those are the same style as in the Profile About tab. And they may be controlled by stylevars.

                    #13
                    Working great. Thank you!

                    Comment


                      #14
                      After Updating to 5.3 there seems to be a little problem on a page only where the tab container is used. The Preview Tooltip reacts much to sensitive... sometimes there appears up to 4 tooltips at the same time and do not disappear. They even stay while scrolling up and down the page.


                      And by the way not a problem but a suggestion: Would it be possible to add the members name inside the tooltip? Maybe below the word "profile"... Because when you hover over just a avatar sometimes it hides the user name.

                      Comment


                        #15
                        Can you post a link?
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        Comment

                        Latest Topics

                        Collapse

                        Working...
                        X