Блог

Главная - Вопросы по программированию - Возникли проблемы с этим методом создания всплывающей подсказки с использованием Javascript

Возникли проблемы с этим методом создания всплывающей подсказки с использованием Javascript

#javascript #css #tooltip

Вопрос:

Наше задание — посмотреть следующее видео и, используя авторский метод, создать список HTML, создать всплывающую подсказку с использованием Javascript для каждого элемента списка и оформить всплывающую подсказку с помощью CSS.

В видео создаются всплывающие подсказки для гиперссылок, и мне просто нужно было изменить его, чтобы всплывающая подсказка была для элементов списка. Звучит просто, но у меня одна проблема; мой CSS работает для всего, КРОМЕ всплывающей подсказки класса. * Всплывающая подсказка отображается только со стилем по умолчанию.Пожалуйста, помогите мне понять, почему.

Вот видео:

 https://www.youtube.com/watch?v=ylWto93_rZM

и вот мой код:

 https://codepen.io/janicefore/pen/wvqmBOV


var Tooltip = {
opening: function() {
var theList = document.getElementsByTagName("li");
        
if ( theList ) {
for(var i = 0; i < theList.length; i  ) {
if( theList[i].title.length) {
theList[i].addEventListener("mouseover", Tooltip.showTip);
theList[i].addEventListener("mouseover", Tooltip.hideTip);
}
                
}
}
},
        
showTip: function( event ) {
var spanElm = document.createElement( "span" );
spanElm.className = "tooltip";
spanElm.innerHTML = event.target.title;
        
event.target.title "";
event.target.appendChild( spanElm ); 
event.target._spanRef = spanElm;
},
        
hideTip: function ( event ) {
event.target.title = event.target._spanRef.innerHTML;
event.target.removeChild( event.target._spanRef );
};
        
window.addEventListener( "load", Tooltip.opening);

Комментарии:

1. Codepen сообщает о множестве ошибок в вашем коде (этот красный восклицательный знак в круге). Например, вам не хватает } for Tooltip .

Ответ №1:

  1. опечатка javascript: наведение курсора мыши -> наведение курсора мыши
  2. синтаксическая ошибка javascript: event.target.title "";
  3. ошибка синтаксиса javascript: отсутствует } для Tooltip = {

Комментарии:

1. Спасибо, что указали на эти ошибки. Они определенно помогут мне добраться туда, однако та же проблема сохраняется. Всплывающая подсказка по-прежнему отображается со стилем по умолчанию; без CSS, который я применил. Я предполагаю, что это должно быть как-то связано с функцией showTip, где я создаю диапазон с именем класса «tooltip», мой CSS не распознает всплывающую подсказку класса.

2. PS Я исправил эти ошибки в своем codepen: codepen.io/janicefore/pen/wvqmBOV

3. Он работает с .tooltip в CSS. my codepen: codepen.io/sdkn104/pen/gOxzRLP

4. Я опубликовал исходный запрос о помощи. Я хотел бы поблагодарить «hashed tomato» за помощь в решении моей проблемы!!! Я пока не понимаю, как все работает, но если мне нужно сделать что-нибудь еще, чтобы отдать вам должное, пожалуйста, дайте мне знать. Замечательно иметь поддержку сообщества разработчиков. Спасибо.

Метки: