当前位置:

如何在el-tooltip展示自定义内容

机器助手 |  2025-07-13
 364人浏览

1 说明

element-ui中有一个文字提示空间el-tooltip,常用于展示鼠标移动到某个控件上面的提示信息,一般来说tooltip的展示内容是文字信息,但是el-tooltip也可以展示各种自定义的html元素。

2 展示方法

<el-tooltip class="item" effect="dark" placement="top">
<div slot="content">

  <!-- 自定义内容 -->
  <span>展示浏览量最高的15篇文章</span>
  <el-rate
    value="5"
    disabled
    show-score
    text-color="#ff9900"
    score-template="5"
  >
  </el-rate>
  <!-- 自定义内容 -->

</div>
<i class="el-icon-info"></i>
</el-tooltip>

说明:我们定义了一个div的插槽"content",在这个div里面就可以自定义我们需要展示的html元素。

文章评论