В HTML низ: (до скрипта спойлера под N-кнопок в профиле)

<style type="text/css">
    .pa-avatar>div{
      position:relative;
      z-index:20;
      display:inline-block;
      margin: auto;
      padding:0;
    }
    .pa-avatar>div>img{
      position:absolute;
      top:0;left:0;
      z-index:-2;
    }
    .pa-avatar>div>span{
    margin:0;
    padding:3px 12px;
    display:block;
    border:10px rgba(121,103,21,0.3); /*Цвет верхнего бордера*/
    border-style:solid none none none;
    background:rgba(229,222,179,0.8); /*Цвет перекрывающего фона*/
    opacity:0;
    transition: opacity 0.6s;
    }
    .pa-avatar:hover>div>span{
    opacity:1.0;
    }
    .pa-avatar>div>span a{
    color:#0817F2!important; /*Цвет ccылок*/
    }
    .pa-avatar>div>span a:hover{
    color:#FF0000!important; /*Цвет ccылок при наведении*/
    text-decoration:underline!important;
    }
    </style>
    <script type="text/javascript">
    $(function(){$('.pa-avatar').each(function(){
      var that =$(this).parents('.post-author').find('.ava-wrp::first'),
      a = $(this).find('img:first');
      if(a.length&&that.length){
        b = that.parents('li[class^="pa-fld"]'),
        h = a.height(),w=a.width(),
        c = a.wrap('<div style="width:'+w+'px;height:'+h+'px;"></div>').parent();
        c.prepend('<span style="max-width:100%;height:'+(h-3*2-10)+'px;">'+b.remove().html()+'</span>');
      }
    });});
    </script>

Синим - идентичные цифры ширины верхнего бордюра;

Установка
1. В доп. поле профиля с необходимостью всплывающей ин-фы на аватаре суем такой код:
<a class=ava-wrp></a>
Данное поле должно допускать HTML, т.е. в настройках поля должен быть выставлен запрет на редактирование юзером.
2. Внутри доп. поля  должны отсутствовать теги <li>;
3. Желательно выставлять одинаковые размеры аватаров у всех пользователей со вставленным тегом <a class=ava-wrp></a>, иначе ин-фа смотрится  несимпатично и может вылезать за край, - редактируем в ФШ или контролируем пользователя.