用原生js实现tooltip的功能

1.需求

用原生js创建一个div层，并且鼠标移入的时候才显示（类似于tooltip的功能~）

var el = document.createElement('div');  // 创建一个div
el.className = 'baseline'; // 自定义类名
el.style.left = '100px'; // 行内样式

// tooltip：鼠标移入才显示
var tooltipEl = document.createElement('div');
tooltipEl.className = 'baseline-hover';
tooltipEl.innerHTML = `<p>计划开始时间：2023-07-20</p>
                       <p>计划结束时间：2023-07-21</p>`
          
// 鼠标移入
el.onmouseover = function() {
  el.style.cursor = 'pointer';
  el.appendChild(tooltipEl)
}

// 鼠标移除
el.onmouseout = function () {
  el.removeChild(tooltipEl)
}

2.遇到的问题：父类的opacity对子类产生了影响

问题：父元素设置了opacity：0.5， 即使设置子元素opacity：1，子元素的opacity还是1
解决方法：父元素采用 rgba 的形式代替 opacity， 并且子元素加上定位 position:absolute/relative 即可

原生js创建一个div层
css父元素透明度（opacity）对子元素的影响