element ui中tooltip跟着鼠标显示
时间: 2023-09-04 22:09:34 浏览: 412
在Element UI中,默认情况下,tooltip是在鼠标悬停在元素上后显示的,而不是跟随鼠标移动。如果您需要tooltip跟随鼠标移动,可以使用以下CSS样式:
```
.el-tooltip__popper {
pointer-events: none;
}
.el-tooltip__popper .popper__arrow {
position: absolute;
margin: 0;
width: 0;
height: 0;
border-style: solid;
}
.el-tooltip__popper[x-placement^="top"] .popper__arrow {
border-width: 8px 8px 0;
border-color: #ccc transparent transparent;
bottom: -8px;
left: 0;
margin-top: 0;
margin-bottom: 0;
}
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
border-width: 0 8px 8px;
border-color: transparent transparent #ccc;
top: -8px;
left: 0;
margin-top: 0;
margin-bottom: 0;
}
.el-tooltip__popper[x-placement^="left"] .popper__arrow {
border-width: 8px 0 8px 8px;
border-color: transparent transparent transparent #ccc;
right: -8px;
top: 0;
margin-left: 0;
margin-right: 0;
}
.el-tooltip__popper[x-placement^="right"] .popper__arrow {
border-width: 8px 8px 8px 0;
border-color: transparent #ccc transparent transparent;
left: -8px;
top: 0;
margin-left: 0;
margin-right: 0;
}
.el-tooltip__popper[x-placement^="top"],
.el-tooltip__popper[x-placement^="bottom"] {
display: flex;
align-items: center;
}
.el-tooltip__popper[x-placement^="left"],
.el-tooltip__popper[x-placement^="right"] {
display: flex;
justify-content: center;
}
.el-tooltip__popper-inner {
max-width: 200px;
word-break: break-word;
text-align: center;
background-color: #fff;
border-radius: 4px;
color: #303133;
font-size: 14px;
line-height: 1.5;
padding: 10px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
z-index: 2000;
position: absolute;
}
.el-tooltip__popper[x-placement^="top"] .el-tooltip__popper-inner,
.el-tooltip__popper[x-placement^="bottom"] .el-tooltip__popper-inner {
left: 50%;
transform: translateX(-50%);
}
.el-tooltip__popper[x-placement^="left"] .el-tooltip__popper-inner,
.el-tooltip__popper[x-placement^="right"] .el-tooltip__popper-inner {
top: 50%;
transform: translateY(-50%);
}
.el-tooltip__popper[x-placement^="top"] .el-tooltip__popper-inner {
bottom: calc(100% + 8px);
}
.el-tooltip__popper[x-placement^="bottom"] .el-tooltip__popper-inner {
top: calc(100% + 8px);
}
.el-tooltip__popper[x-placement^="left"] .el-tooltip__popper-inner {
right: calc(100% + 8px);
}
.el-tooltip__popper[x-placement^="right"] .el-tooltip__popper-inner {
left: calc(100% + 8px);
}
```
然后,在使用tooltip的地方,添加以下属性:
```
:popper-options="{ boundariesElement: 'window', gpuAcceleration: false, positionFixed: true }"
```
这样做会将tooltip的位置固定在页面上,并启用GPU加速以提高性能。
阅读全文
相关推荐


















