ElementUI中的tooltip隨屏幕的寬度 消失和顯示

最近開發的時候，用到tooltip,這個磨人的小妖精，讓我茶不思，飯不想很久...
我是讓她顯示在右邊的，但是當我窗口縮小的時候，常常她會飄過來，遮住別的元素，
我卻拿她沒法。 本着用戶體驗至上的職業操守 沒辦法，只能讓她小屏的時候隱身了。。
入正文：

模塊中使用

要寫兩個方法
1 初始化的時候來斷定屏幕的寬度的方法
2 窗口屏幕縮放的時候來調用的方法

一.在main.js中寫一個全局方法

Vue.prototype.getViewportSize = function () {
  return {
    width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  }
}

二.在用到toolTip的模塊

<template>
  <div class="box" style="width:50%;margin:0 auto">
    <el-tooltip forceAbsolute="true" placement="right" :popper-class="toolColor">
      <div
        slot="content"
        class="text-wrap"
      >試一下試一下試一下試一下試一下試一下試一下試一下試一下試一下試一下試一下試一下試一下試一下試一下試一下試一下試一下試一下試一下</div>
      <el-input placeholder="請輸入內容" ></el-input>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  data () {
    return {
      toolColor: ''
    }
  },
  created () {
    // 給窗口綁定方法
    window.addEventListener('resize', this.handleResize)
    this.initData()
  },
  methods: {
    // 初始化的時候判斷當前屏幕的大小
    initData () {
      if (this.getViewportSize().width > 1500) {
        this.toolColor = ''
      } else if (this.getViewportSize().width < 1500) {
        this.toolColor = 'toolColor'
      }
    },
    // 對應的方法
    handleResize (event) {
      this.fullWidth = document.documentElement.clientWidth
      console.log(this.fullWidth)
      if (this.fullWidth > 1500) {
        this.toolColor = ''
      } else if (this.fullWidth < 1500) {
        this.toolColor = 'toolColor'
      }
    }
  }
}
</script>

<style>
.toolColor {
  display: none;
}
</style>

效果圖