关于javascript:自定义antd-Tree组件悬浮提示窗内容

以 antd 官网例子为例。当鼠标放到文字区域，鼠标悬浮窗显示文本内容，因为
<span> 标签中的 title 属性，曾经设置了内容。

而在 TreeNode props 中有 disableCheckbox 和disabled，别离代表禁用 checkbox 和禁掉响应。
而在这种禁用的场景下。一般来说鼠标悬浮窗提醒都是固定内容。比如说 *** 不可用 之类的内容。而且在款式上也会不一样。而 antd 内置的 title 属性却没方法暗藏。

这里记录一下本人的一个解决方案。
1，给 TreeNode 减少一个 className 属性，比方 disable-item-node.
2. 绑定mouseover 事件。找到上面 span 中的 title 属性，并设置为空

useEffect(()=>{const element = document.getElementsByClassNae('disable-item-node');
  if((let i =0; i<element.length;i++){element[i].children[2].setAttribute("title",""); 
     }
  }
},[])

3,css 款式做一下自定义解决。

.disable-item-node{
  position:relative;
  &:hover::after{
      z-index:100;
      content:"...";
      display:inline-block;
      border:0.01rem solid #ddd;
      border-radius:0.01rem;
      position:absolute;
      top:0.2rem;
      left:1rem;
      background:#rgba(0,0,0,0.5);
      color:#fff;
  }

}

这样从视觉上就能解决这个问题。