独立封装 tooltip组件

tooltip组件的封装

html 代码如下：

<div id="lz_tooltip_container" class="lz_tooltip_container">
 <div class="tooltip">
    <span class="arrow" />
    <div class="cont" />
  </div>
</div>

CSS样式代码如下：

.lz_tooltip_container {
  position: fixed;
  left: -900px;
  top: -1000px;
  z-index: 999;
}

.lz_tooltip_container > .tooltip {
  position: absolute;
  background: rgba(100, 99, 99, 0.87);
  color: #fff;
  top: -20px;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 5px;
}

.lz_tooltip_container > .tooltip > .cont {
  // white-space: nowrap;
  width: 170px;
  font-size: 18px;
  color: #81b6fa;
  text-align: center;
  line-height: 18px;
}

 .lz_tooltip_container > .tooltip > .arrow {
    position: absolute;
     width: 0;
    height: 0;
    bottom: -6px;
    left: 112px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(100,99,99,.58);
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
}

.lz_tooltip_container > .tooltip_hidden {
  display: none;
}

JS代码 如下：

// 以下内容  一般写在鼠标移入事件
  const tooltip = document.getElementById('lz_tooltip_container') // 获取容器 
  if (!tooltip) return
  const cont = tooltip.querySelector('.cont')
  if (!cont) return
  cont.innerText = '需要展示的文字' // 也可以用innerHTML 在这个节点中加入自己需要的HTML标签
  tooltip.style.left = `${x - 65}px` // x是横坐标  一般触发hover事件，可以获取到当前节点的x坐标
  tooltip.style.top = `${y - 15}px`  // y是纵坐标

总结

toolTip组件 主要还是根据触发事件节点自己携带的x，y坐标信息进行定位的，悬浮样式，根据css自行修改。