<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/screen/components/CustomTooltip.vue
 * @Date: 2022-07-08 08:52:06
 * @Description: 自定义tooltip组件
 * @LastEditTime: 2022-07-27 14:47:15
 * @LastEditors: changjun
-->
<script>
import { ElTooltip } from 'element-plus'
export default {
  name: 'myTooltip',
  mixins: [],

  components: {
    ElTooltip
  },

  props: {
    text: {
      type: String,
      default: () => ''
    }
  },

  data() {
    return {
      showTooltip: true
    }
  },

  computed: {},

  watch: {
    text: {
      handler() {
        this.$nextTick(() => this.checkWidth())
      },
      immediate: true
    }
  },

  created() {},

  mounted() {},

  destroyed() {},

  methods: {
    checkWidth() {
      const boxWidth = this.$refs['tooltipBox'].offsetWidth
      const itemWidth = this.$refs['tooltipItem'].offsetWidth
      this.showTooltip = boxWidth > itemWidth
    }
  }
}
</script>

<template>
  <div class="tooltip-container">
    <el-tooltip
      popper-class="custom-screen-tooltip"
      placement="top"
      class="my-tooltip"
      :disabled="showTooltip"
      :content="text"
    >
      <p ref="tooltipBox" class="text-box">
        <span ref="tooltipItem" class="">{{ text }}</span>
      </p>
    </el-tooltip>
  </div>
</template>

<style scoped lang="scss">
.tooltip-container {
  width: 100%;
  .text-box {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
  }
}
</style>

<style lang="scss">
.custom-screen-tooltip{
  background: #012159 !important;
  border: 1px solid #52BCFF !important;
  font-size: 12px;
  font-family: 'MicrosoftYaHei';
  border-radius: 0;
}

.custom-screen-tooltip {
  .el-popper__arrow:before{
    border-color: #52BCFF !important;
    background: #012159 !important;
  }
}
</style>
