【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果

 

 

<template>
  <div>
    <!-- 提示框 -->
    <div
      class="float-tip"
      :show="floatTipData.show"
      :style="floatTipData.style"
    >
      {{ floatTipData.text }}
    </div>
    <!-- 移入某个元素触发显示跟随提示框显示-->
    <div
      class=" ellipsis-text"
      @mouseover="showFloatTip($event.target.innerText)"
      @mouseout="hideTip"
    >
      这里的内容会在气泡框中显示，因为这段话太长了，没办法显示完毕，所以我用了跟随鼠标的气泡框！
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      floatTipData: {
        show: false,
        text: "",
        style: {
          left: "",
          top: ""
        }
      }
    };
  },
  mounted() {
    this.mouseFollowFloatTip();
  },
  methods: {
    showFloatTip(text = "") {
      this.floatTipData.text = text;
      this.floatTipData.show = true;
    },
    hideTip() {
      this.floatTipData.show = false;
    },
    mouseFollowFloatTip() {
      // 鼠标跟随tip
      let floatTip = document.querySelector(".float-tip");
      document.onmousemove = e => {
        let x = e.clientX,
          y = e.clientY;
        let mouseOffsetX = 20,
          mouseOffsetY = 20;
        let left = x + mouseOffsetX;
        let top = y + mouseOffsetY;
        let floatTipRect = floatTip.getBoundingClientRect();
        //边界判断
        left + floatTipRect.width > window.innerWidth &&
          (left -= floatTipRect.width + mouseOffsetX + 10);
        top + floatTipRect.height > window.innerHeight &&
          (top -= floatTipRect.height + mouseOffsetY + 10);
        this.floatTipData.style = {
          left: left + "px",
          top: top + "px"
        };
        this.floatTipData = JSON.parse(JSON.stringify(this.floatTipData));
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.ellipsis-text {
  margin-left: 200px;
  margin-top: 200px;
  width: 200px;
  /*多行省略号*/
  overflow: hidden;
  word-break: break-all; /*单词分割换行*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  max-height: min-content;
  -webkit-line-clamp: 3;
  cursor: pointer;
  transition: 0.382s ease;
  &:hover {
    color: red;
  }
}
// 气泡框样式----------------------------------------
.float-tip {
  transition: opacity 0.382s ease, left 0.2s ease, top 0.2s ease;
  position: absolute;
  max-width: 200px;
  word-wrap: break-word;
  white-space: normal;
  font-size: 12px;
  pointer-events: none;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border: 1px solid #eee;
  padding: 10px;
  z-index: 999999;
  opacity: 0;
  &[show] {
    opacity: 1;
  }
}
</style>