el-tooltip设置边框样式
时间: 2023-07-07 07:20:38 浏览: 302
要设置 `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"开头的元素的边框样式。
请注意,我在这个回答中引用了、和中的内容。
el-tooltip样式修改
要修改el-tooltip的样式,可以通过添加popper-class属性来给组件添加一个选择器名,然后在全局样式中修改该选择器的样式。首先,在el-tooltip标签中添加popper-class属性,比如popper-class="testtooltip"。然后,在全局样式中添加一个样式标签,将需要修改的样式写在其中。注意,这些样式不能写在scoped样式标签里,需要重新写一个样式标签单独放。比如:
```html
<el-tooltip placement="bottom" popper-class="testtooltip">
<div slot="content"> ceshi </div>
<el-button>Dark</el-button>
</el-tooltip>
<style lang="less">
/* 修改箭头颜色 */
.el-tooltip__popper\[x-placement^="bottom"\] .popper__arrow {
border-bottom-color: white!important;
}
.el-tooltip__popper\[x-placement^="bottom"\] .popper__arrow:after {
border-bottom-color: white !important;
}
/* 修改内容背景颜色 */
.testtooltip {
background: white !important;
box-shadow: 1px 1px 10px 3px #D3D3D6;
}
</style>
```
如果要修改提示框中长方形框的背景颜色,可以使用以下样式:
```css
.el-tooltip__popper {
background: rgba(0,0,0,0.65) !important;
}
```
如果要修改提示框中的小三角的边框颜色,可以使用以下样式:
```css
/* 注意\[^=top\]是下三角,即提示框在上方,若提示框在下方则使用\[^=bottom\] */
.el-tooltip__popper\[x-placement^=top\] .popper__arrow:after {
border-top-color: #595959 !important;
}
```
需要注意的是,以上修改都需要在全局样式中进行,因为el-tooltip组件的层级并不是在你使用它的地方,而是和你的app同一层级,所以在当前使用的地方找不到提示框的DOM节点。
#### 引用[.reference_title]
- *1* *2* [el-tooltip 如何修改样式](https://blog.csdn.net/coderhhan/article/details/109220682)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [element-ui中Tooltip文字提示——el-tooltip的样式修改](https://blog.csdn.net/mongchu/article/details/126622774)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]