На странице есть поля типа 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;
}
