el-tooltip多行文字提示并修改提示框默认的黑色背景

效果：

完整代码：

<template>
  <div class="query-title-icon">
    <p class="query-title">标题</p>
    <el-tooltip tabindex="-1" popper-class="tooltip" placement="right">
      <i class="el-icon-warning-outline"></i>
      <div slot="content" class="tooltip-content">
        <div>
          <p>1、内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
          <p class="indent">内容内容内容内容内容内容内容内容内容内容。</p>
        </div>
        <div>
          <p>2、内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
          <p class="indent">内容内容内容内容内容内容内容内容内容内容内容。</p>
        </div>
        <div>
          <p>3、内容内容内容内容内容。</p>
        </div>
      </div>
    </el-tooltip>
  </div>
</template>
<style lang="scss">
.query-title-icon {
  display: flex;
  align-items: center;
  margin-top:100px;
  .query-title,
  .el-icon-warning-outline {
    color: #333;
    font-size: 14px;
    font-weight: bold;
  }
  .el-icon-warning-outline {
    cursor: pointer;
    padding-left: 5px;
  }
}
// 提示语内容的样式
.tooltip-content {
  div {
    line-height: 18px;
    .indent {
      padding-left: 20px;
    }
  }
  div + div {
    padding-top: 5px;
  }
}
// 修改提示框的三角形箭头的样式
.el-tooltip__popper[x-placement^="right"] .popper__arrow {
  border-right-color: #fff !important;
}

.el-tooltip__popper[x-placement^="right"] .popper__arrow:after {
  border-right-color: #fff !important;
}

.el-tooltip__popper[x-placement^="left"] .popper__arrow {
  border-left-color: #fff !important;
}

.el-tooltip__popper[x-placement^="left"] .popper__arrow:after {
  border-left-color: #fff !important;
}

.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  border-top-color: #fff !important;
}

.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
  border-top-color: #fff !important;
}

.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: #fff !important;
}

.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
  border-bottom-color: #fff !important;
}
// 修改提示框的样式
.tooltip {
  color: #666 !important;
  font-size: 14px !important;
  background: #fff !important;
  box-shadow: 0px 2px 6px 0px rgba(136, 136, 136, 0.28) !important;
}
</style>

注意:
1、style标签中没写scoped,写scoped的话，上面代码style中的"修改提示框的三角形箭头的样式"和"修改提示框的样式"这两部分的样式就不生效了，加/deep/也不生效的，提示框的样式就变成默认的黑色背景了
2、如果需要加scoped,可以把"修改提示框的三角形箭头的样式"和"修改提示框的样式"这两部分样式提取出来写在公共样式common文件中，然后把common引入到项目的App.vue组件中即可（这样的话项目的所有提示框都是一样的样式了）