el-tooltip 内容为空时不让他显示

`el-tooltip` 是 Element UI 中的一个轻量级提示组件，当它的内容为空时，默认会隐藏 tooltip。如果你想要强制在内容为空的情况下也保持 tooltip 显示，你可以自定义组件的 `formatter` 函数。这个函数会在渲染时检查内容是否为空，并决定是否展示 tooltip。

例如，在 Vue.js 中，你可以这样做：

<el-tooltip :formatter="formatTooltipContent">
  <span>点击这里</span>
</el-tooltip>

<script>
export default {
  methods: {
    formatTooltipContent(content) {
      // 如果 content 为空，返回默认文本或字符串 true
      return content || 'This is a tooltip with no content';
    }
  }
}
</script>

这样，即使 `content` 为空，tooltip 也会显示你指定的默认文本。如果希望在内容确实为空时才显示特定的文字，可以判断 `content === ''` 或者 `content === null` 等。

相关问题

vue+el-table-column的show-overflow-tooltip属性 内容为空时 出现tooltip问题

当 `el-table-column` 中设置 `show-overflow-tooltip` 属性时，如果单元格内容为空，会出现 tooltip 显示的问题。

解决方法是在单元格内部设置一个不可见的空格占位符，例如使用 ` `，这样就能正常显示 tooltip 了。

示例代码：

<el-table-column prop="name" label="姓名" show-overflow-tooltip>
  <template slot-scope="{ row }">
    {{ row.name || '&nbsp;' }}
  </template>
</el-table-column>

vue+el-table-column的show-overflow-tooltip属性 内容为空 出现悬浮窗问题

当使用 `show-overflow-tooltip` 属性时，如果内容为空，则会出现悬浮窗问题。这是因为该属性会将单元格内容隐藏，只显示省略号，并在悬浮时显示完整内容。因此，如果内容为空，则悬浮窗会出现在单元格的左上角，不符合预期。

为了解决这个问题，可以使用 `v-if` 来判断内容是否为空，如果为空，则不使用 `show-overflow-tooltip` 属性。示例代码如下：

<el-table-column prop="name" label="姓名">
  <template slot-scope="scope">
    <div v-if="scope.row.name" show-overflow-tooltip>
      {{ scope.row.name }}
    </div>
    <div v-else>
      -
    </div>
  </template>
</el-table-column>

这样，在单元格内容为空时，会显示 `-`，而不会出现悬浮窗问题。