这种使用 Javascript 创建工具提示的方法有问题

Question

我们的任务是观看以下视频并使用作者的方法，创建一个 HTML 列表，使用 Javascript 为每个列表项创建一个工具提示，并 设置工具提示的样式CSS.

该视频为超链接创建了工具提示，我只需要对其进行更改，以便工具提示适用于列表项。听起来很简单，但我遇到了一个问题；我的 CSS 适用于除 class 工具提示之外的所有内容。* 工具提示仅显示默认样式。 请帮我找出原因。

这是视频：

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

Answer 1

javascript 错别字：鼠标悬停 -> 鼠标移出
javascript语法错误：event.target.title "";
javascript 语法错误：Tooltip = {

}

这种使用 Javascript 创建工具提示的方法有问题

Having a problem with this method of creating a tooltip using Javascript

javascript

css

tooltip