vue+element当鼠标停留在i标签上时显示文字提醒
时间: 2023-12-11 15:02:45 浏览: 86
可以使用Element UI提供的Tooltip组件来实现这个功能。具体实现步骤如下:
1. 在需要显示提示的i标签上添加Tooltip组件,设置提示内容。
```html
<el-tooltip content="这是提示内容">
<i class="el-icon-info"></i>
</el-tooltip>
```
2. 如果需要自定义提示内容,可以使用v-slot插槽。
```html
<el-tooltip>
<i class="el-icon-info"></i>
<div slot="content">
<p>这是自定义提示内容</p>
</div>
</el-tooltip>
```
3. 如果需要在鼠标停留一定时间后才显示提示,可以设置delay属性。
```html
<el-tooltip content="这是提示内容" :open-delay="1000">
<i class="el-icon-info"></i>
</el-tooltip>
```
其中,open-delay属性的值表示延迟显示提示的时间,单位为毫秒。
4. 如果需要在i标签上显示提示文字,可以设置append-to-body属性为false。
```html
<el-tooltip content="这是提示内容" :append-to-body="false">
<i class="el-icon-info"></i>
</el-tooltip>
```
设置append-to-body属性为false后,提示内容将显示在i标签的下方。
希望以上内容可以帮助到你,如果还有疑问请随时追问。