Our assignment is to watch the following video and using the author's method, create an HTML list, create a tooltip using Javascript for each list item and style the tooltip with CSS.

The video create tooltips for hyperlinks and I just needed to change it so the tooltip is for list items. Sounds simple but I'm having one problem; my CSS works for everything BUT the class tooltip.* The tooltip only shows up with default styling. Please help me figure out why.

Here's the video:

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

and here's my code:

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