iview tooltips 表格显示超出显示

<template>
<!-- columns存在render,超出显示tooltip+省略号-->
  <Tooltip placement="right-end" :content="value" :disabled="!showTooltip" style="width: 100%">
    <span ref="content" class="ivu-table-cell-tooltip-content" @mouseenter.stop="handleTooltipIn" @mouseleave.stop="handleTooltipOut">
      {{ value }}
    </span>
  </Tooltip>
</template>
<script>
export default {
  props: {
    value: {
      type: String
    }
  },
  data () {
    return {
      showTooltip: false
    }
  },
  methods: {
    handleTooltipIn () {
      const $content = this.$refs.content
      this.showTooltip = $content.scrollWidth > $content.offsetWidth
    },
    handleTooltipOut () {
      this.showTooltip = false
    }
  }
}
</script>
<style scoped lang='scss'>
/deep/.ivu-tooltip-popper.ivu-tooltip-dark {
  // left: 0 !important;
  // left: 0 !important;
  .ivu-tooltip-inner {
    word-wrap: break-word;
    white-space: pre-wrap;
  }
}

</style>