Javascript-форум - Положение элемнта .offset().left и position:absolutle

На странице есть поля типа input и у каждого есть атрибут tooltip="Подсказка":

<input type="text" name="name" value="ФИО"  title="ФИО" tooltip="Введите ФИО"/>

JS скриптом я ниже каждого такого поля создаю <span> с подсказкой.

$('[tooltip]').each(function(){
        $(this).after('<span class="tooltip">'+$(this).attr('tooltip')+'</span>');
        
       });

СSS

.tooltip{
    width: 200px;
    visibility: hidden;   
    z-index: 99;
    position: absolute; 
   ....................

При focus()/blur() делаю их visible/hidden

$('input[type=text]').focus(function(e){            
       
         var left = $(this).offset().left;
         var top = $(this).offset().top+30;   
         $(this).next('.tooltip').css({'visibility':'visible','top':top,'left':left})
           
        }).blur(function() {         
         $(this).next('.tooltip').css({'visibility':'hidden'})  
        });

Все работает. Но есть проблема. Есть div.
Изначально display:none;
В нем форма.
У него position:absolutle.
По событию его display:block; Он появляется по центру экрана.
Когда кликаю у поля подсказки появляют внизу экранаб а не под полями.
Там где он распологает в коде, без стиля position:absolutle
Если у #forma убираю position:absolutle, то все работает.
но как тогда помести ее в центр экрана поверх страницы.

Как сделать что бы подсказки в блоке с position: absolute; выводитлись там где спозиционирован блок?
Вот пример.
В примере нажмите на поле в фильтре(подсказка ниже появится)
и нажмите кнопку добавить и в любом поле (подсказка будет внизу)

<div id="forma">
........
 <input type="text" name="name1" value="Фамилия"  title="Фамилия" tooltip="Укажите фамилию."/>
........
</div>

CSS

#forma{
    position: absolute;
    top:25%;
    left: 40%;
   display:  none; 
}