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>

效果图