Mini Profile Hover

[MissNK]

I know there are already two templates out there for mini-profile hovers. However, both those templates are based on hovering an image (or, hovering text and letting an image appear). As I wanted to have text on "both sides" (on the object you are hovering and the object which appears) I came up with a different solution and thought I could it as well share it with you guys.

The code consists of three parts: a bit styling (css), the html and a bit of javascript. I recommend to replace the styling (everything between the <style>-tags) in the style sheet of your forum (Admin > Themes > Advanced Styles & CSS > Style Sheet) instead of keeping it in the mini-profile template.  The code itself is barely a set-up and the only thing it (probably) matches is the default theme. You can (and should) add styling and you are free to (re)place the different objects (such as rank/group-name/stars, post counts, etc). I would, however, very much appreciate if you keep the credits intact / this is not really a request, I just try to be friendly (:.

You can use this template by just replacing the entire code from the Mini-Profile Template (Admin > Structure > Layout Templates > Mini Profile) with the code I provided. I would also like to mention that @khristian wrote a very usable tutorial about how to add member custom fields.

(printscreen mini profile hover)

Mini Profifel Hover (code)
<!-- Mini-Profile by MissNK (Proboards Support Forum) -->
<style>
   .mp-default, .mp-hover { height: 250px; position: relative; overflow-y: auto; }
</style>

<div class="$[miniprofile_class]">
   
   <!-- Default Mini-Profile -->
   <div class="mp-default">
       <span style="color:$[user.color];">$[user.name]</span><br />
           {if $[user.is_member]}
            {if $[user.is_banned]}
            user is <b>banned</b>
            {elseif $[user.is_deleted]}
            user is <b>deleted</b>
            {elseif $[user.group]}
        $[user.group.name]<br />
        $[user.group.stars]
            {else}
            $[user.rank.name]<br />
        $[user.rank.stars]
            {/if}
           {elseif $[user.is_guest]}
            user is guest
           {else}
            Don't reply to this message <!-- shows in mini profile of the welcome-message -->
           {/if}
       <br /><br />
       
       
       {if $[user.avatar]}
        <div class="avatar">
               $[user.avatar]
           </div>
       {/if}
       <br />
       
       {if $[user.is_member]}
        {if !$[user.is_banned] && !$[user.is_deleted]}
       
                   {if $[user.is_online]}
                    member is <b>online</b>
                   {else}
                    member is <b>offline</b>
                   {/if}
        {/if}
       {/if}
   </div>
   
   <!-- Hover Mini-Profile -->
   <div class="mp-hover">
       
       <!-- Place your content beneath this line -->
       <div style="text-align: justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div><br />
       
       {if $[user.is_member] && !$[user.is_deleted]}
        Total Posts: $[user.posts]
        {if $[user.gender]}<br />Gender: $[user.gender.image]{/if}
       {/if}
       
       {if $[user.is_member] && !$[user.is_deleted]}
       <br /><br/>
        View <a href="$[user.link.href]">profile</a>{if !$[user.is_banned]} or send <a href="$[user.pm_href]">pm</a>{/if}
       {/if}
       <!-- Place your content above this line -->
       
   </div>
</div>

<script>
   $('.mp-hover').hide();
   $('.$[miniprofile_class]').hover(function() {
       
       $(this).find('.mp-default').hide();
       $(this).find('.mp-hover').show();
   }, function() {
       $(this).find('.mp-hover').hide();
       $(this).find('.mp-default').show();
});
</script>
Welcome-Message Avatar (code)
If you want to replace the default forum-staff avatar (as shown in the welcome-message, if enabled) with one of your own, replace line 33 ($[user.avatar]) with the code below. Change 'your-link-here.jpg' to the url of the avatar you want to use.

            {if !$[user.is_member] && !$[user.is_guest]}
            <!-- Forum Staff Avatar -->
            <img src="your-link-here.jpg">
            {else}
            $[user.avatar]
            {/if}


Last but not least a bit of a disclaimer: I didn't write the javascript-code myself ("just" googled it), because I know close to nothing about javascript. So, do me a favour and don't touch that part of the code. Unless, of course, you know what you are doing and you can make it better. If that is the case, I wouldn't mind if you did take a second to enlighten me ~