el-tooltip去除边框
时间: 2023-10-30 18:03:14 浏览: 96
要去除el-tooltip的边框,可以根据引用中提供的解决办法进行操作。根据引用所述,解决办法是添加以下代码。首先,添加以下代码可以去除丑陋的黑框:
```css
.el-tooltip .popper {
border: none;
}
```
接下来,添加以下代码可以让悬浮内容不显示:
```css
.el-tooltip .popper .popper__arrow,
.el-tooltip .popper[x-placement^="top"]>.popper__arrow,
.el-tooltip .popper[x-placement^="top"] .popper__arrow {
display: none;
}
```
这样,el-tooltip的边框就会被去除了。请注意,以上代码是基于引用提供的需求和解决办法而来的。
相关问题
el-tooltip设置边框样式
要设置 `el-tooltip` 的边框样式,可以使用 `::v-deep` 伪类来覆盖默认的样式,具体步骤如下:
1. 在你的样式表中添加以下代码:
```css
::v-deep .el-tooltip__popper {
border: 1px solid #ccc; /* 设置边框样式 */
}
```
这里使用 `::v-deep` 伪类是因为 `el-tooltip` 是使用了 Vue 的 Scoped CSS 技术,所以需要通过 `::v-deep` 来穿透到子组件的样式。
2. 根据需要自行修改边框的样式。
3. 如果你只想修改特定 `el-tooltip` 组件的样式,可以给该组件添加一个唯一的类名,然后在上述代码中将 `.el-tooltip__popper` 替换为你的类名即可。
注意:在使用 `::v-deep` 时,需要确保你的 Vue 版本大于等于 2.2.0。另外,由于 `::v-deep` 是一个实验性的特性,未来可能会发生变化,请谨慎使用。
去除el-tooltip边框
要去除el-tooltip的边框,您可以使用以下CSS样式代码:
.el-tooltip__popper.is-light[x-placement^="bottom"],
.el-tooltip__popper.is-light[x-placement^="top"],
.el-popper[x-placement^="bottom"] {
border: none !important;
}
这段代码将针对具有特定类名和属性的元素,去除它们的边框样式。具体来说,它会去除.el-tooltip__popper.is-light类名中x-placement属性以"bottom"开头以及x-placement属性以"top"开头的元素的边框样式,同时也会去除.el-popper类名中x-placement属性以"bottom"开头的元素的边框样式。
请注意,我在这个回答中引用了、和中的内容。