el-tooltip样式修改

要修改el-tooltip的样式，可以通过添加popper-class属性来给组件添加一个选择器名，然后在全局样式中修改该选择器的样式。首先，在el-tooltip标签中添加popper-class属性，比如popper-class="testtooltip"。然后，在全局样式中添加一个样式标签，将需要修改的样式写在其中。注意，这些样式不能写在scoped样式标签里，需要重新写一个样式标签单独放。比如：

<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>

如果要修改提示框中长方形框的背景颜色，可以使用以下样式：

.el-tooltip__popper {
  background: rgba(0,0,0,0.65) !important;
}

如果要修改提示框中的小三角的边框颜色，可以使用以下样式：

/* 注意\[^=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 ]