Всплывающие подсказки

@_Mikhail_ · Регистрация: 14.10.2012

Студворк — интернет-сервис помощи студентам

Доброго времени суток!)
Задача следующая, при наведении на слово в посте нужно реализовать появление подсказки. И тут следующие вопросы:
1. Скрипт подсказок нужно реализовать самостоятельно (без плагинов). Нужно что бы подсказки работали как в gmail при на ведении на контакт или заголовок письма (это просто идеальный варинт для подсказки). Подскажите как реализовать такой механизм. В частности я не знаю, и не нашел как сделать что бы подсказка оставалась активной если мышка в ее области...и усли увел курсор пропадала.
2. В нутри подсказки бедет еще текст html, отностительно сложный. В Эту подсказку должна будет вносится информации с друго сайта. Как обращаться к этому другому сайту(планирую через xml), а самое главно где хранить информацию. Реальзовать через ajax запросы мне не хочется совсем, поскольку пользователю придется ждаьть пока там все эта информацию загрузиться?

@Soldado · 15.02.2013, 11:27

Кто Вам задания такие ставит? Загружать текст подсказок с другого сайта.... (вопрос риторический).

Механизм подсказок подробно рассмотрен здесь.

Для этого форума я готовил демо-страницу - подсказки для вновь загруженного контента.

@_Mikhail_ · 15.02.2013, 12:02 **[ТС]**

Давайте немного подробнее задание опишу.
Есть нейкий ресурс (сайт). На котором пользователи тыкают на карте России любое место и описывают как там хорошо, или как там плохо, ну и немного разной другой информации.
Есть блог на WP. Пользователь пишет очередную статью и выкладывает ее.
Перед тем как статья опубликуется, ее должен обработать наш плагин. Что он делает: он ищет места (т.е. совпадающие слова) в тексте поста и места котороые есть на нашем ресурсе.
Если такое совпадение есть, то это слово нужно подсветить в тексте и при наведении на него курсора должана всплыть подсказа-диологовое окно (как в gmail) Которая выведет информацию имееющиеся на нашем ресурсе. Пользователь может либо прейти по ссылки на описание месте либо кинуть какйнить комент...или еще что то.

Вот как то так....задание дают в интстетуте такое))

Добавлено через 6 минут
А вот то что на ссылках расположенно я реализовал до обращения на фоурм, минут за 10. А дальше в пинике и недоумении обращаюсь за помощью...ибо не представляю как это реализовывать(
Вот мой вариант кода:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <meta charset-UTF-8>
    <link href="style.css" type="text/css" rel="stylesheet">
    <script src="jquery.js"></script>
    <script src="my_script.js"></script>
</head>
<body>
    <h2>Тут что то написано.</h2>
    <p>А тут текст с <a href="#">ссылкой</a>, которую <span class="qwerty1">нужно</span> будет подсветить.</p>
    <div id="tooltip" alt="Ссылка" data-tooltip="Текст подсказки"></div>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function() {
    $(".qwerty1")
        .mouseover( function(eventObject){
            $("#tooltip")
                .text("Вот это вставленный текст.")
                .css({
                    "top" : eventObject.pageY - 10,
                    "left" : eventObject.pageX - 10
                })
                .show();
        })
        .mouseleave( function() {
            $("#tooltip").hide();
        })
 
});

В CSS и так все понятно.

Новые блоги и статьи Все статьи Все блоги /
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .

@_Mikhail_ 5 / 5 / 1 Регистрация: 14.10.2012 Сообщений: 75

	Всплывающие подсказки 15.02.2013, 09:48. Показов 2749. Ответов 2 Метки нет (Все метки) Доброго времени суток!) Задача следующая, при наведении на слово в посте нужно реализовать появление подсказки. И тут следующие вопросы: 1. Скрипт подсказок нужно реализовать самостоятельно (без плагинов). Нужно что бы подсказки работали как в gmail при на ведении на контакт или заголовок письма (это просто идеальный варинт для подсказки). Подскажите как реализовать такой механизм. В частности я не знаю, и не нашел как сделать что бы подсказка оставалась активной если мышка в ее области...и усли увел курсор пропадала. 2. В нутри подсказки бедет еще текст html, отностительно сложный. В Эту подсказку должна будет вносится информации с друго сайта. Как обращаться к этому другому сайту(планирую через xml), а самое главно где хранить информацию. Реальзовать через ajax запросы мне не хочется совсем, поскольку пользователю придется ждаьть пока там все эта информацию загрузиться? 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	15.02.2013, 11:27
	Кто Вам задания такие ставит? Загружать текст подсказок с другого сайта.... (вопрос риторический). Механизм подсказок подробно рассмотрен здесь. Для этого форума я готовил демо-страницу - подсказки для вновь загруженного контента. 1

Всплывающие подсказки

Решение