Nuestra tarea es ver el siguiente video y usar el método del autor, crear una lista HTML, crear una información sobre herramientas usando Javascript para cada elemento de la lista y diseñar la información sobre herramientas con CSS .

El video crea información sobre herramientas para hipervínculos y solo necesitaba cambiarlo para que la información sobre herramientas sea para los elementos de la lista. Suena simple pero tengo un problema; mi CSS funciona para todo MENOS la información sobre herramientas de la clase.* La información sobre herramientas solo se muestra con el estilo predeterminado. Por favor, ayúdame a averiguar por qué.

Aquí está el vídeo:

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

y aquí está mi código:

 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);