关于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;  }}

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