使用JavaScript为列表项实现tooltip时tooltip类CSS样式不生效求助

问题排查结果 #

你的代码共有3处语法/逻辑错误，导致tooltip自定义样式无法生效：

• 事件绑定错误：hideTip 方法错误绑定到了 mouseover 事件，和 showTip 触发时机完全重合，导致tooltip元素刚被创建就被立即移除，自然无法看到自定义样式，只能看到浏览器默认的title提示。需要改为绑定到 mouseout 事件。
• 赋值语法错误：showTip 方法中清空原有title的代码缺少等于号，正确写法为 event.target.title = ""; ，你的代码此处存在语法错误，会直接阻断JS执行。
• 对象语法错误：Tooltip 对象中 hideTip 方法结束后错误使用了分号，对象的多个属性/方法之间需要用逗号分隔，此处语法错误会导致整个Tooltip对象初始化失败。

修正后的完整JS代码 #

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);
          // 修正：hideTip绑定到mouseout事件
          theList[i].addEventListener("mouseout", 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);

内容的提问来源于stack exchange，提问作者janicefore