<el-tooltip placement="top" effect="dark" :content="inputValue" >
        <el-input 
           v-model="inputValue" 
           @mouseover="handleMouseover"
           @mouseout="handleMouseout" 
           @focus="focus"
           placeholder="Please input" 
        />
    </el-tooltip>
        

    handleMouseover(e) {
      if (this.isOverflow(e.target)) {
        this.toolTipVisible = true;
      }
    },
    handleMouseout() {
      this.toolTipVisible = false;
    },
    focus() {
      this.toolTipVisible = false;
    },
    isOverflow(target) {
      const inputWidth = target.offsetWidth;
      const spanEl = document.createElement("span");
      spanEl.style.visibility = "hidden";
      spanEl.style.whiteSpace = "nowrap";
      spanEl.style.position = "absolute";
      spanEl.style.left = "-9999px";
      spanEl.textContent = this.inputValue;
      document.body.appendChild(spanEl);
      const contentWidth = spanEl.offsetWidth;
      document.body.removeChild(spanEl);
      return inputWidth < contentWidth;
    },

:deep(.el-input__inner)[type="text"] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}