Самодельная всплывающая подсказка неработает

@Сергей Мишин · Регистрация: 19.07.2016

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

Уровень автора:любитель;

Изменил мою подсказу всплывающую,решил что таких будет много на странице,надо чтобы при наведении создавался div с классом,айди,и тп. а при отведении - исчезал.
mydiv - элемент на который навожу курсор
myimg - div который появляется.

Вот код

Javascript

div = document.getElementById('mydiv');           //неработает!
div.onmouseover = function(e) {
    
    doc = document.createElement("div");
    doc.style.visibility="visible";
    doc.className="div"; 
    div.appendChild(doc);
    doc.id="myimg";
    }
                                       
                                   
    div.onmouseout = function() {                                                 //Исчезновение
          s = document.getElementById("myimg");
          s.remove();
          
      }

HTML5

1
2

<img src="../Enchantress_icon.png" width="32" height="32" style="margin:10px 15px auto;" id="mydiv"/> <!-- элемент на который наводится курсор -->
<!-- сюда вставляется div -->

Это "плавающее окно" с абсолютным позиционированием,и з-индексом,поверх всех элементов,поэтому appendChild.
Уверен что что-то упускаю!

@ironid · 20.07.2016, 21:19

вы не можете добавить ребенка img -у, вместо

Сообщение от Сергей Мишин

div.appendChild(doc);

вставьте

Javascript

1	this.parentElement.appendChild(doc);

@newJS · 21.07.2016, 05:30

Сообщение от Сергей Мишин

надо чтобы при наведении создавался div с классом,айди,и тп. а при отведении - исчезал.

зачем создавать каждый раз?, при наведении показал, при уходе скрыл
и z-index не нужен, этот див и так поверх всех ляжет, позиционированные элементы всегда выше обычных элементов
если этот див прописать в самом конце html, то он будет и поверх других позиционированных элементов

@Сергей Мишин · 21.07.2016, 06:56 **[ТС]**

создаю новое так как у меня таких много на странице и если наводил бы,то появлялись все div по всему сайту во всех местах,потому id у всех одинаковое. А так я создаю этот див когда навожу,привязываю стили к нему все,и делов то.

@kalabuni · 21.07.2016, 14:12

Сообщение от Сергей Мишин

потому id у всех одинаковое

id по определению не может быть "у всех одинаковое"
id -- это как биометрический паспорт -- уникальный для конкретного человека

@Сергей Мишин · 21.07.2016, 16:14 **[ТС]**

Тк функция автоматическая а неназванная я немогу передать В функцию параметр из html кода,знаю что можно сделать именнованую функцию,но она неработает на событие onmousemove Почемуто ,может кто то переписать мой код на основе моих утверждений?

@kalabuni · 21.07.2016, 17:20

существует два рациональных способа реализации множества всплывающих подсказок:
первый -- в HTML в тексте прописываются <span class="txt">подстроки, при наведении курсора на которые всплывает подсказка</span> с одним и тем же именем класса
и сразу после каждого такого span'a прописывается<div class="tip">с текстом подсказки для предыдущего span'a</div>
в стилях классу .tip прописывается правило display: none
по загрузке страницы скриптом на все теги .txt на событие onmouseover "вешается" функция, которая следующий тег через nextSibling делает видимым, абсолютно спозиционированным и устанавливает ему нужные координаты left и top, исходя из координат тега span, на который наведён курсор
функция, назначенная на событие onmouseout, делает последующий div снова невидимым
главный недостаток этого способа -- большой объём HTML-кода
к достоинствам следует отнести малый объём и простоту скрипта, а также лёгкость редактирования HTML-кода (потому как подстроки и подсказки к ним в коде находятся рядом

второй способ -- в HTML-коде в тексте прописываются <span class="txt" id="sN">подстроки, при наведении курсора на которые всплывает подсказка</span> с одним и тем же именем класса, но с разными уникальными идентификаторами
и в самом конце страницы прописывается один невидимый абсолютно спозиционированный <div id="tip"></div>
по загрузке страницы скриптом на все теги .txt на событие onmouseover "вешается" функция, которая единственный div в коде делает видимым и устанавливает ему нужные координаты left и top, исходя из координат тега span, на который наведён курсор и меняет внутреннее содержимое этого div, которое функция берёт из большого ассоциативного js-массива, где ключами являются id'ы тегов span, а значениями -- содержимое соответствующих подсказок
функция, назначенная на событие onmouseout, делает единственный div снова невидимым
главные недостатки этого способа -- большой объём js-кода и сложность редактирования кода (span'ы и js-массив разнесены в пространстве и связаны лишь значениями идентификаторов, в которых легко ошибиться)
к достоинствам следует отнести малый объём HTML-кода и простоту скрипта

------
вы же собираетесь реализовать свой собственный новый способ, при котором, хотите ли вы того или нет, вам также нужно будет конструировать js-массив с ключами и содержимым подсказок, но функция, которая будет обрабатывать onmouseover, будет перегружена совершенно ненужной процедурой создания нового контейнера для подсказки
уверяю вас -- это нерационально
выше вам посоветовали использовать описанный мною второй способ
прислушайтесь к совету

@Сергей Мишин · 21.07.2016, 18:54 **[ТС]**

Спасибо за 2 способ!

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	21.07.2016, 05:30	3
	Сообщение от Сергей Мишин надо чтобы при наведении создавался div с классом,айди,и тп. а при отведении - исчезал. зачем создавать каждый раз?, при наведении показал, при уходе скрыл и z-index не нужен, этот див и так поверх всех ляжет, позиционированные элементы всегда выше обычных элементов если этот див прописать в самом конце html, то он будет и поверх других позиционированных элементов 0

@Сергей Мишин 1 / 1 / 1 Регистрация: 19.07.2016 Сообщений: 118
	21.07.2016, 06:56 [ТС]	4
	создаю новое так как у меня таких много на странице и если наводил бы,то появлялись все div по всему сайту во всех местах,потому id у всех одинаковое. А так я создаю этот див когда навожу,привязываю стили к нему все,и делов то. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	21.07.2016, 14:12	5
	Сообщение от Сергей Мишин потому id у всех одинаковое id по определению не может быть "у всех одинаковое" id -- это как биометрический паспорт -- уникальный для конкретного человека 0

@Сергей Мишин 1 / 1 / 1 Регистрация: 19.07.2016 Сообщений: 118
	21.07.2016, 16:14 [ТС]	6
	Тк функция автоматическая а неназванная я немогу передать В функцию параметр из html кода,знаю что можно сделать именнованую функцию,но она неработает на событие onmousemove Почемуто ,может кто то переписать мой код на основе моих утверждений? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	21.07.2016, 17:20	7
	существует два рациональных способа реализации множества всплывающих подсказок: первый -- в HTML в тексте прописываются <span class="txt">подстроки, при наведении курсора на которые всплывает подсказка</span> с одним и тем же именем класса и сразу после каждого такого span'a прописывается<div class="tip">с текстом подсказки для предыдущего span'a</div> в стилях классу .tip прописывается правило display: none по загрузке страницы скриптом на все теги .txt на событие onmouseover "вешается" функция, которая следующий тег через nextSibling делает видимым, абсолютно спозиционированным и устанавливает ему нужные координаты left и top, исходя из координат тега span, на который наведён курсор функция, назначенная на событие onmouseout, делает последующий div снова невидимым главный недостаток этого способа -- большой объём HTML-кода к достоинствам следует отнести малый объём и простоту скрипта, а также лёгкость редактирования HTML-кода (потому как подстроки и подсказки к ним в коде находятся рядом второй способ -- в HTML-коде в тексте прописываются <span class="txt" id="sN">подстроки, при наведении курсора на которые всплывает подсказка</span> с одним и тем же именем класса, но с разными уникальными идентификаторами и в самом конце страницы прописывается один невидимый абсолютно спозиционированный <div id="tip"></div> по загрузке страницы скриптом на все теги .txt на событие onmouseover "вешается" функция, которая единственный div в коде делает видимым и устанавливает ему нужные координаты left и top, исходя из координат тега span, на который наведён курсор и меняет внутреннее содержимое этого div, которое функция берёт из большого ассоциативного js-массива, где ключами являются id'ы тегов span, а значениями -- содержимое соответствующих подсказок функция, назначенная на событие onmouseout, делает единственный div снова невидимым главные недостатки этого способа -- большой объём js-кода и сложность редактирования кода (span'ы и js-массив разнесены в пространстве и связаны лишь значениями идентификаторов, в которых легко ошибиться) к достоинствам следует отнести малый объём HTML-кода и простоту скрипта ------ вы же собираетесь реализовать свой собственный новый способ, при котором, хотите ли вы того или нет, вам также нужно будет конструировать js-массив с ключами и содержимым подсказок, но функция, которая будет обрабатывать onmouseover, будет перегружена совершенно ненужной процедурой создания нового контейнера для подсказки уверяю вас -- это нерационально выше вам посоветовали использовать описанный мною второй способ прислушайтесь к совету 1

@Сергей Мишин 1 / 1 / 1 Регистрация: 19.07.2016 Сообщений: 118
	21.07.2016, 18:54 [ТС]	8
	Спасибо за 2 способ! 0