如何从element-ui中删除工具提示组件中的淡出过渡？

Question

我想在失去焦点后立即删除工具提示，但它只在默认的过渡时间消失。

我使用element-ui https://element.eleme.io/#/en-US/component/tooltip中的工具提示组件

<el-tooltip 
    placement="bottom"
    :content="my text"
    :enterable="false"
>
  <div class="custom-item">Next</div>
</el-tooltip>

Answer 1

使用带有空值的过渡属性。

<el-tooltip
  placement="bottom"
  :content="my text"
  :enterable="false"
  transition="" <-- add this prop
>
  <div class="custom-item">Next</div>
</el-tooltip>

Answer 2

想要达到同样的效果，但不幸的是，他们在mouseleave上硬编码了200ms去抖动

this.debounceClose = debounce(200, () => this.handleClosePopper());

https://github.com/ElemeFE/element/blob/dev/packages/tooltip/src/main.js#L75

实现它的一种很好的方式：

<el-tooltip
  transition=""
  :disabled="tooltipDisabled"
>
  <button
    @mouseleave="tooltipDisabled = true"
    @mouseenter="tooltipDisabled = false"
  ></button>
</el-tooltip>