【ElementUI】文字提示 el-tooltip

宾果的救星

已于 2022-10-21 16:46:37 修改

阅读量2k

点赞数

分类专栏： # Element 文章标签： elementui vue.js javascript

于 2021-01-22 22:25:54 首次发布

本文链接：https://blog.csdn.net/wuli_youhouli/article/details/113005983

版权

Element 专栏收录该内容

17 篇文章

订阅专栏

本文档介绍了如何在Vue中使用`el-tooltip`组件创建自定义的文字提示。通过设置`placement`属性和`effect`属性，可以实现顶部提示且具有暗色主题的效果。内容部分展示了如何直接在`content`属性中输入文字提示，以及利用`slot=content`插入自定义HTML内容，以增强提示信息的表现力。这对于提升用户界面的交互体验至关重要。

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

初始文字提示

文档中展示的小提示，只能单纯的展示文字。

<el-tooltip placement="top" effect="dark" content="0：初始状态，7：完成状态，9：作废状态">
  <el-input v-model="value" placeholder="字段值" clearable></el-input>
</el-tooltip>

自定义文字提示

slot="content"内就可以自定义想展示的东西。

<el-tooltip placement="top">
  <div slot="content">0：初始状态，7：完成状态，9：作废状态</div>
  <el-input v-model="value" placeholder="字段值" clearable></el-input>
</el-tooltip>