Всплывающая подсказка над полем

[kampil]

Есть такой вопрос: а как возможно сделать всплывающую подсказку над полем ввода(текстовым) на css,когда наступает событие onFocus ну т.е. типо такого,только чтобы это подсказка не раздвигала другие элементы когда делаешь display:block :

<style>
   .class1{
     display:none;
	 position:relative;
   }
   .class2{
    position:relative;
	display:block;
   }



     <div class="class1" id="tips">Это подсказка для поля</div>
     <input id="myfield" onFocus="document.all['tips'].className='class2';" type="text" />

вопрос глупый , понимаю, но всё же хочется услышать ответ...

[B~Vladi]

чтобы это подсказка не раздвигала другие элементы когда делаешь display:block

Добавь position:absolute ему, ну и всё из этого вытекающее

[kampil]

Добавь position:absolute ему, ну и всё из этого вытекающее

ну это канешь понятно что position: absolute, но абсолютное позиционирование идёт относительно ближайшего абсолютно позиционированного элемента, т.е. вот если нужно именно "над" input полем вывести, т.е. как бы не понятно тогда, тупо прибавлять там везде координаты типо там top: left: это не выход, на jQuery же можно сделать чтобы было там над или под элементом, но вот именно как это сделать на javascript или css не важно, вот что интересует

[Riim]

<div style="position: relative;"><input onfocus="this.nextSibling.style.display = 'block';" /><div style="padding: 0 10px; background: #f99; display: none; position: absolute; left: 170px; top: 0;">text</div></div>

[kampil]

Не ну так это опять же понятно всё...ну я кажется понял ваще как это сделать т.е. это только через javascript возможно канешь, т.е. нам нужны координаты скажем самого input элемента узнаем ты их наверное через offsetLeft или offsetTop вот , ну не буду сейчас пробовать, меня интересовало вот именно ход решения этой задачи, т.к. один раз не смог сделать, забил, сделав по простому тоже, но просто интерестно понять как это сделать, просто можно пользоваться понятное дело что фраемворками, но не понимая как это сделать юез них , это не есть гуд

[B~Vladi]

т.е. это только через javascript возможно канешь, т.е. нам нужны координаты скажем самого input элемента узнаем ты их наверное через offsetLeft или offsetTop

Тебе Riim привёл пример кода, в котором не надо вычислять никаких координатов. Поиграйся с ним.

[kampil]

не, я уже протестил, через offsetLeft и offsetTop сделать можно, я не знаю, как насчёт работоспособности во всех браузерах, но с чистым css и DOM это не сделаешь, а rim привел код , но это же не куда не годится правильно: position: absolute; left: 170px имеется в виду left: 170px я ж не буду каждый раз подгонять, нужно же универсальное решение

[B~Vladi]

через offsetLeft и offsetTop сделать можно, я не знаю, как насчёт работоспособности во всех браузерах

Да, так можно и кроссбраузерно.

но с чистым css и DOM это не сделаешь

Сделаешь

я ж не буду каждый раз подгонять, нужно же универсальное решение

Тебе и не надо подгонять! У тебя каждая подсказка будет на 170px правее поля... Обрати внимание на position: relative; - о чём это говорнит?! О том, что координаты абсолютного дива будут расчитываться от его родителя, а не от body.

[Riim]

я ж не буду каждый раз подгонять, нужно же универсальное решение

вместо left можно right написать. Еще можно с float вместо position:absolute попробовать.

[kampil]

Ну чтож, я согласен) мда, надо бы получше мне выучить всё, что относится к позиционированию..