Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Tooltip содержащий input и button


Автор: t77 6.2.2012, 22:30
Доброе время суток.

Необходимо реализовать всплывающую подсказку, при наведении курсора мышки на картинку, в  которой будет поле ввода текста (input), линки (a), кнопки (button), текст... 
Может существуе виджет jquery или или придется реализовать подобное самому..? 
Что лучше всего использовать ? Подскажите куда копать ?
Спасибо.

Автор: $дмитрий 6.2.2012, 22:53
Можно взять http://jquery.bassistance.de/tooltip/demo/
Либо любой другой по запросу "jquery tooltip"

Автор: t77 6.2.2012, 23:26
$дмитрий, они прикольные, каждый по своему... Но, ни один из приведенных вариантов, не содержит ничего, кроме текста.
Мне же необходимо, запихнуть в tooltip, поле ввода (input) и еще кнопочку (button). После наведения курсора мышки на элемент(допустим этим элементом будет img), появляется всплывающая подсказка, в которой находятся поле ввода (input) и еще кнопочка. После этого, можно будет ввести текст в поле и нажать на кнопочку. Ну и естественно прописать поведение кнопки в коде... 
Так вот как сделать такой tooltip ??

Автор: $дмитрий 6.2.2012, 23:43
Цитата

После этого, можно будет ввести текст в поле и нажать на кнопочку

Это уже не tooltip. 

Примерный алгоритм:
1. Создаем слой, внутри которой находится форма
2. Вешаем обработчик hover на нужный элемент
3. При наведении курсора на элемент вычисляем тукущие координаты и присваиваем их слою с формой. Отображаем слой методом show
4. При отводе курсора скрываем слой с формой методом hide

Автор: Evghenusi 10.2.2012, 14:08
чёт клюнуло меня  smile и решил попробовать, благо на форуме две темы посвящённые tooltip-ам.

а споткулся я на том, что не знаю как перевести стрелку мышки на слой что бы он не скрылся, onmouseout элемента срабатывает.

мелоч наверно, а я споткнулся)
может есть у кого мысля?

Автор: $дмитрий 10.2.2012, 15:38
Цитата

что бы он не скрылся

Есть 2 способа
1. Сделать слой вложенным в основной объект
2. Навесить на слои доп. обработчик hover(или onmouseout если нативно)

Автор: Evghenusi 10.2.2012, 15:53
Тоже думал про события на слое, но у меня расположение tooltip зависит от курсора (стрелки мышки), то есть при срабатывании onmouseover на элементе,  X/Y мышки прописываются соответственно в letf/top слоя. Хоть расстояние между элементом и слоем не пол километра, но слой скроется если отвести мышку от элемента.
Кажется не обойтись без таймера, который задержит скрытие слоя (display:none)  smile 

Автор: $дмитрий 10.2.2012, 16:12
Цитата

но у меня расположение tooltip зависит от курсора

Если так, то да, используй таймер

Автор: Evghenusi 10.2.2012, 17:28
не люблю я таймеры  smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)