el-tooltip内容用插槽展示（slot#content用法）

最新推荐文章于 2025-05-22 14:05:06 发布

Yaince

最新推荐文章于 2025-05-22 14:05:06 发布

阅读量8.8k

点赞数 6

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Yaince/article/details/122339279

本文介绍如何在El-Tooltip组件中使用自定义slot#content，确保当鼠标悬浮时同时展示tooltip的默认内容和自定义页面数据，解决内容空白问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-tooltip effect="light" placement="bottom-start">
      <div slot="content" class="tips">
        <div class="content">
          <p>tooltip展示的数据（默认加的插槽）</p>
        </div>
      </div>
      <template>
        <div class="content">
          <p>页面展示的数据（鼠标悬浮的容器，自定义插槽）</p>
        </div>
      </template>
    </el-tooltip>

多内容展示的tooltip使用slot#content 必须在el-tooltip下加自定义作用的插槽否则页面（鼠标悬浮上去也没有内容）展示内容为空