el-tooltip如何自动一直显示

如果要让`el-tooltip`自动一直显示，可以设置其属性`enterable`为`true`，并且将`transition`属性设置为空值或者为`none`。

示例代码：

<el-tooltip content="这是提示内容" enterable transition="">
  <span>鼠标移入</span>
</el-tooltip>

在上面的代码中，当鼠标移入`<span>`元素时，`el-tooltip`会自动显示，并且即使鼠标移开，`el-tooltip`也会一直显示。由于设置了`enterable`属性为`true`，所以鼠标移入到`el-tooltip`上时，它也不会消失。同时，由于将`transition`属性设置为空值或者为`none`，所以`el-tooltip`不会有任何动画效果。

相关问题

el-tooltip自动一直显示

可以通过设置 `manual` 属性为 `true` 来实现 `el-tooltip` 自动一直显示，而不需要操作鼠标。具体方法如下：

<el-tooltip content="这是一个提示" manual>
  <span>鼠标悬停在这里</span>
</el-tooltip>

注意，设置了 `manual` 属性后，`el-tooltip` 将不再根据鼠标的位置自动显示和隐藏，而是一直显示。如果需要手动控制 `el-tooltip` 的显示和隐藏，可以通过 `show` 和 `hide` 方法来实现。例如：

<el-tooltip ref="tooltip" content="这是一个提示">
  <span @click="showTooltip">点击显示提示</span>
</el-tooltip>

methods: {
  showTooltip() {
    this.$refs.tooltip.showPopper();
  },
  hideTooltip() {
    this.$refs.tooltip.hidePopper();
  }
}

el-tooltip自动一直显示，不用操作鼠标

如果要让`el-tooltip`自动一直显示，不需要操作鼠标，可以通过编写自定义指令实现。

示例代码：

<template>
  <div>
    <div v-show-tooltip="'这是提示内容'">这是需要提示的内容</div>
  </div>
</template>

<script>
export default {
  directives: {
    showTooltip: {
      inserted(el, binding) {
        el.$tooltip = document.createElement('div')
        el.$tooltip.innerHTML = binding.value
        el.$tooltip.className = 'el-tooltip__popper is-dark'
        el.$tooltip.style.position = 'fixed'
        el.$tooltip.style.top = '0'
        el.$tooltip.style.left = '0'
        el.$tooltip.style.zIndex = '99999'
        el.$tooltip.style.display = 'none'
        document.body.appendChild(el.$tooltip)

        el.addEventListener('mouseenter', () => {
          el.$tooltip.style.display = 'block'
        })
        el.addEventListener('mouseleave', () => {
          el.$tooltip.style.display = 'none'
        })
      },
      unbind(el) {
        document.body.removeChild(el.$tooltip)
        delete el.$tooltip
      }
    }
  }
}
</script>

在上面的代码中，我们编写了一个名为`showTooltip`的自定义指令。当我们在模板中使用`v-show-tooltip`指令并传入提示内容时，会自动创建一个`el-tooltip`，并且该提示框会自动显示并保持显示状态，直到页面关闭或者删除该`el-tooltip`为止。

该自定义指令实现的原理是，在鼠标移入指令所在的元素时，会创建一个`el-tooltip`并将其添加到页面中，同时设置其样式和位置，使其覆盖在所在元素的上方，从而达到提示的效果。当鼠标移出指令所在的元素时，将删除该`el-tooltip`元素，从而结束提示的过程。