Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Tooltip содержащий input и button, как сделать tooltip содержащий input и b 
:(
    Опции темы
t77
  Дата 6.2.2012, 22:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет



Доброе время суток.

Необходимо реализовать всплывающую подсказку, при наведении курсора мышки на картинку, в  которой будет поле ввода текста (input), линки (a), кнопки (button), текст... 
Может существуе виджет jquery или или придется реализовать подобное самому..? 
Что лучше всего использовать ? Подскажите куда копать ?
Спасибо.
PM MAIL   Вверх
$дмитрий
Дата 6.2.2012, 22:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 2
Всего: 45



Можно взять этот
Либо любой другой по запросу "jquery tooltip"
PM MAIL   Вверх
t77
  Дата 6.2.2012, 23:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 459
Регистрация: 27.7.2008

Репутация: нет
Всего: нет



$дмитрий, они прикольные, каждый по своему... Но, ни один из приведенных вариантов, не содержит ничего, кроме текста.
Мне же необходимо, запихнуть в tooltip, поле ввода (input) и еще кнопочку (button). После наведения курсора мышки на элемент(допустим этим элементом будет img), появляется всплывающая подсказка, в которой находятся поле ввода (input) и еще кнопочка. После этого, можно будет ввести текст в поле и нажать на кнопочку. Ну и естественно прописать поведение кнопки в коде... 
Так вот как сделать такой tooltip ??
PM MAIL   Вверх
$дмитрий
Дата 6.2.2012, 23:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 2
Всего: 45



Цитата

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

Это уже не tooltip. 

Примерный алгоритм:
1. Создаем слой, внутри которой находится форма
2. Вешаем обработчик hover на нужный элемент
3. При наведении курсора на элемент вычисляем тукущие координаты и присваиваем их слою с формой. Отображаем слой методом show
4. При отводе курсора скрываем слой с формой методом hide
PM MAIL   Вверх
Evghenusi
Дата 10.2.2012, 14:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


майский жук
**


Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 1
Всего: 15



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

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

мелоч наверно, а я споткнулся)
может есть у кого мысля?
PM WWW   Вверх
$дмитрий
Дата 10.2.2012, 15:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 2
Всего: 45



Цитата

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

Есть 2 способа
1. Сделать слой вложенным в основной объект
2. Навесить на слои доп. обработчик hover(или onmouseout если нативно)
PM MAIL   Вверх
Evghenusi
Дата 10.2.2012, 15:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


майский жук
**


Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 1
Всего: 15



Тоже думал про события на слое, но у меня расположение tooltip зависит от курсора (стрелки мышки), то есть при срабатывании onmouseover на элементе,  X/Y мышки прописываются соответственно в letf/top слоя. Хоть расстояние между элементом и слоем не пол километра, но слой скроется если отвести мышку от элемента.
Кажется не обойтись без таймера, который задержит скрытие слоя (display:none)  smile 
PM WWW   Вверх
$дмитрий
Дата 10.2.2012, 16:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 2
Всего: 45



Цитата

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

Если так, то да, используй таймер
PM MAIL   Вверх
Evghenusi
Дата 10.2.2012, 17:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


майский жук
**


Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 1
Всего: 15



не люблю я таймеры  smile 
PM WWW   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0756 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.