el-tooltip自动一直显示,不用操作鼠标
时间: 2023-07-21 10:32:20 浏览: 1122
可以通过设置 `manual` 属性为 `true` 来实现 `el-tooltip` 自动一直显示,而不需要操作鼠标。具体方法如下:
```html
<el-tooltip content="这是一个提示" manual>
<span>鼠标悬停在这里</span>
</el-tooltip>
```
注意,设置了 `manual` 属性后,`el-tooltip` 将不再根据鼠标的位置自动显示和隐藏,而是一直显示。如果需要手动控制 `el-tooltip` 的显示和隐藏,可以通过 `show` 和 `hide` 方法来实现。例如:
```html
<el-tooltip ref="tooltip" content="这是一个提示">
<span @click="showTooltip">点击显示提示</span>
</el-tooltip>
```
```javascript
methods: {
showTooltip() {
this.$refs.tooltip.showPopper();
},
hideTooltip() {
this.$refs.tooltip.hidePopper();
}
}
```
相关问题
el-tooltip自动一直显示
可以通过设置 `manual` 属性为 `true` 来实现 `el-tooltip` 自动一直显示,而不需要操作鼠标。具体方法如下:
```html
<el-tooltip content="这是一个提示" manual>
<span>鼠标悬停在这里</span>
</el-tooltip>
```
注意,设置了 `manual` 属性后,`el-tooltip` 将不再根据鼠标的位置自动显示和隐藏,而是一直显示。如果需要手动控制 `el-tooltip` 的显示和隐藏,可以通过 `show` 和 `hide` 方法来实现。例如:
```html
<el-tooltip ref="tooltip" content="这是一个提示">
<span @click="showTooltip">点击显示提示</span>
</el-tooltip>
```
```javascript
methods: {
showTooltip() {
this.$refs.tooltip.showPopper();
},
hideTooltip() {
this.$refs.tooltip.hidePopper();
}
}
```
el-tooltip如何自动一直显示
如果要让`el-tooltip`自动一直显示,可以设置其属性`enterable`为`true`,并且将`transition`属性设置为空值或者为`none`。
示例代码:
```
<el-tooltip content="这是提示内容" enterable transition="">
<span>鼠标移入</span>
</el-tooltip>
```
在上面的代码中,当鼠标移入`<span>`元素时,`el-tooltip`会自动显示,并且即使鼠标移开,`el-tooltip`也会一直显示。由于设置了`enterable`属性为`true`,所以鼠标移入到`el-tooltip`上时,它也不会消失。同时,由于将`transition`属性设置为空值或者为`none`,所以`el-tooltip`不会有任何动画效果。
阅读全文