Element UI Tooltip 内嵌进度条：根据条件显示提示内容 - 示例教程

<template>
  <div>
    <el-tooltip v-if="showTooltip" effect="dark" content="这是一个进度条" placement="top">
      <el-progress :percentage="progress" :text-inside="true" />
    </el-tooltip>
    <el-button @click="toggleTooltip">切换显示</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showTooltip: false,
      progress: 50,
    };
  },
  methods: {
    toggleTooltip() {
      this.showTooltip = !this.showTooltip;
    },
  },
};
</script>
<p>在上面的示例中，<code>el-tooltip</code>组件的显示状态由<code>showTooltip</code>数据属性控制。当<code>showTooltip</code>为<code>true</code>时，<code>el-tooltip</code>显示；当<code>showTooltip</code>为<code>false</code>时，<code>el-tooltip</code>隐藏。</p>
<p>你可以根据你的业务逻辑来决定何时设置<code>showTooltip</code>为<code>true</code>或<code>false</code>，以达到根据数据条件判断是否显示<code>el-tooltip</code>组件的效果。</p>