Почему не работает всплывающая подсказка?

@sandy15 · Регистрация: 02.07.2015

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body>
<my id="text1" title="Всплывающая подсказка">Текст</a>
 
<script type="text/javascript">
document.getElementById('my').onmouseover = showTooltip;
document.getElementById('my').onfocus = showTooltip;
document.getElementById('my').onmouseout = hideTooltip;
document.getElementById('my').onblur = hideTooltip;
function addTooltipHandlers(element) {
    element.onmouseover = showTooltip;
    element.onmouseout = hideTooltip;
    element.onfocus = showTooltip;
    element.onblur = hideTooltip;
}
function showToolTip(e) {
    if (typeof e == 'undefined') e = window.event;
    var target = e.target || e.srcElement;
    target.previousSibling.lastChild.style.visibility = 'visible';
}
function hideToolTip(e) {
    if (typeof e == 'undefined') e = window.event;
    var target = e.target || e.srcElement;
    target.previousSibling.lastChild.style.visibility = 'hidden';
}
</script>
</body>

@Fedor Vlasenko · 02.03.2016, 02:38

JavaScript
1
 var target = e ? e.target :  window.event.srcElement;

@kalabuni · 02.03.2016, 02:49

потому что у вас не рабочий код, а бессмысленный набор нескольких совершенно не связанных с HTML-кодом js-строк, да и сам HTML-код написан по-идиотски
что за тег у вас такой <my>...</a> в первой строке?

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

в общем, всё это выбрасывайте -- исправить это невозможно в принципе

погуглите Tooltip -- найдёте сотни (и даже тысячи) нормально работающих кодов

@sandy15 · 02.03.2016, 02:53 **[ТС]**

Что это? Вы тестировали? Работает?

Добавлено через 3 минуты

Сообщение от kalabuni

погуглите Tooltip - найдёте сотни (и даже тысячи) нормально работающих кодов

В том то и дело, что примеров нормальных в инете не находится. Уже 3 часа гуглю в поисках кода. Сам в JS не силен. Мне надо только оформить всплывающую подсказку. Замучился уже. Вот вроде подходящий код, а вы говорите, что плохой.

И еще в инете в основном находятся сложные коды, а мне надо чтоб наипростейший был. Чтоб было ясно два плюс два. А не часами разбирать, что к чему.

@newJS · 02.03.2016, 11:31

В title <a href="\" title=" Как сделать здесь текст крупнее при го выводе?"

Сообщение от sandy15

Вот вроде подходящий код, а вы говорите, что плохой.

А это вообще не код, это просто набор символов. Мне первая строка тоже в глаза бросилась сразу.

@kalabuni · 02.03.2016, 14:09

Сообщение от newJS

Мне первая строка тоже в глаза бросилась сразу.

надеюсь, увернуться успели?

а то попадёт такой "осколочек", станете Каем, придётся вам своей спасительницы-Герды дожидаться, и вдруг попадётся не волшебница, а такая, которая "только учус"?

@iVKO · 02.03.2016, 14:17

Сообщение от kalabuni

а то попадёт такой "осколочек", станете Каем, придётся вам своей спасительницы-Герды дожидаться, и вдруг попадётся не волшебница, а такая, которая "только учус"?

Ну вы и злодей.

@newJS · 03.03.2016, 07:04

Сообщение от kalabuni

надеюсь, увернуться успели?

Ну, дык, раз отвечаю, значит таки успел.

@sandy15 · 03.03.2016, 19:16 **[ТС]**

Может кто подсказать или скинуть ссылку на самый простой скрипт всплывающей подсказки на javascript?
А то мне трудно пока разобраться как его писать. Еще совсем новичок в этом.

@kalabuni · 04.03.2016, 04:26

чтобы сделать всплывающую подсказку, вам надо иметь 3 (три) кода
1) HTML-код, в котором будут выделен как текст, при наведении на который будет всплывать подсказка, так и текст самой подсказки

2) CSS-код, который установит внешний вид как текста, при наведении на который будет всплывать подсказка, так и самой подсказки

3) и только потом, в самом конце, вам нужен будет JS-код

Так как в JS вы новичок, сделайте сами хотя бы два первых кода
подсказываю:

в HTML-коде должна быть хоть одна пара двух подряд идущих тегов
<span class="HV">текст, при наведении курсора на который будет всплывать подсказка</span><div class="TT">текст подсказки</div>

в CSS-коде должны быть прописаны правила стиля для двух классов
.HV {} /*для текста, по наведению на который должна всплывать подсказка (цвет, подчёркивание, вид курсора) */
.TT {} /*для подсказки (ширина высота, внутренние отступы, цвет фона, граница, с радиусами или без них) */

Ну и, когда вы ещё напишете мне:
-- на каком расстоянии (в пикселях) от верхнего края текста должна появиться нижняя грань подсказки
-- на каком расстоянии (в пикселях) от начала текста должна находиться левая грань подсказки
вот тогда я и помогу вам со скриптом

Жду вашего ответа
Удачи!

@WhiteMind · 04.03.2016, 04:50

самое простое вот

http://jqueryui.com/tooltip/
а вот примерный вариант

Добавлено через 10 секунд
https://jsfiddle.net/etxyaL2u/3/

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	02.03.2016, 02:49
	потому что у вас не рабочий код, а бессмысленный набор нескольких совершенно не связанных с HTML-кодом js-строк, да и сам HTML-код написан по-идиотски что за тег у вас такой <my>...</a> в первой строке? у вас нет самой подсказки, т.е. всплывать просто нечему у вас нет тега, на который надо наводить курсор мыши, чтобы подсказка всплывала в общем, всё это выбрасывайте -- исправить это невозможно в принципе погуглите Tooltip -- найдёте сотни (и даже тысячи) нормально работающих кодов 0

@sandy15 0 / 1 / 0 Регистрация: 02.07.2015 Сообщений: 263
	03.03.2016, 19:16 [ТС]
	Может кто подсказать или скинуть ссылку на самый простой скрипт всплывающей подсказки на javascript? А то мне трудно пока разобраться как его писать. Еще совсем новичок в этом. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	04.03.2016, 04:26
	чтобы сделать всплывающую подсказку, вам надо иметь 3 (три) кода 1) HTML-код, в котором будут выделен как текст, при наведении на который будет всплывать подсказка, так и текст самой подсказки 2) CSS-код, который установит внешний вид как текста, при наведении на который будет всплывать подсказка, так и самой подсказки 3) и только потом, в самом конце, вам нужен будет JS-код Так как в JS вы новичок, сделайте сами хотя бы два первых кода подсказываю: в HTML-коде должна быть хоть одна пара двух подряд идущих тегов <span class="HV">текст, при наведении курсора на который будет всплывать подсказка</span><div class="TT">текст подсказки</div> в CSS-коде должны быть прописаны правила стиля для двух классов .HV {} /для текста, по наведению на который должна всплывать подсказка (цвет, подчёркивание, вид курсора) / .TT {} /для подсказки (ширина высота, внутренние отступы, цвет фона, граница, с радиусами или без них) / Ну и, когда вы ещё напишете мне: -- на каком расстоянии (в пикселях) от верхнего края текста должна появиться нижняя грань подсказки -- на каком расстоянии (в пикселях) от начала текста должна находиться левая грань подсказки вот тогда я и помогу вам со скриптом Жду вашего ответа Удачи! 0

@WhiteMind Hello Kitty 690 / 562 / 402 Регистрация: 12.02.2016 Сообщений: 1,436 Записей в блоге: 1
	04.03.2016, 04:50
	самое простое вот http://jqueryui.com/tooltip/ а вот примерный вариант Добавлено через 10 секунд https://jsfiddle.net/etxyaL2u/3/ 0