persagy-web-doc/docs/.vuepress/components/tDInsert/addTooltip.vue

<template>
  <div class="base">
    <addPicture1
      @onMouseleave="mouseLeave"
      @onMouseenter="mouseenter"
    ></addPicture1>
    <tooltip ref="tooltip_map" v-show="showTooltip">{{ tooltipmsg }}</tooltip>
  </div>
</template>
<script>
import tooltip from "./tooltip";
import addPicture1 from "./addPicture1";
export default {
  components: { tooltip, addPicture1 },
  data() {
    return {
      tooltipmsg: "", //tooltip信息
      showTooltip: false, // 是否展示tooltip
    };
  },
  methods: {
    //   鼠标移入
    mouseenter(item, e) {
      //   显示卡片
      this.showTooltip = true;
      //   赋给卡片坐标
      this.$refs.tooltip_map.$el.style.left = e[0].offsetX + "px";
      this.$refs.tooltip_map.$el.style.top = e[0].offsetY + "px";
      //   赋给内容
      this.tooltipmsg = item.data.tooltipmsg;
    },
    //   鼠标移出
    mouseLeave(item, e) {
      this.showTooltip = false;
    },
  },
};
</script>
<style lang="less">
.base {
  position: relative;
}
</style>