前提：最近用element-ui做了一个文字提示的样式，但框架拥有的样式不符合需求，所以经高人指点，特此总结；
相信大家在用ui框架写样式的时候，都遇到过这样一个问题，就是用起来虽然方便，但拓展性不行，大多时候都只能将就着用，好了，步入正题；
1. 需求如下
- 由于权限不足，所以当移动到不支持都操作时，移动上去在下方显示一段提示（要求颜色要是灰色）
- 这时我就使用了 element-ui 的Tooltip组件，但是尴尬的问题出现了，它只支持两种样式，如下：
2. 解决方法
-
一般情况下组件是支持拓展的，你可以在下方找到对应的拓展属性，如下：
-
这时我们就可以为这个组件提供一个类名
<el-tooltip popper-class="process-list-tooltips" v-if="memberType === 0" class="item" effect="dark" content="无此操作权限，请申请空间权限" placement="bottom" >
<el-button type="info" style="margin-left: 10px" >新建流程</el-button>
</el-tooltip>
.process-list-tooltips {
background: #909399;
}
-
这样经过测试，结果如下：
-
发现样式并没有改变，但这时候重点来了，高能！！
-
鼠标移到下方提示文字那里然后鼠标右边点击检查元素，如图：
-
这时看到我们设置但样式并没有生效，然后我们知道css有样式优先级，我们就可以样式覆盖，如下代码：
.el-tooltip__popper.is-dark.process-list-tooltips {
background: #909399;
}
- 这样我们就能得到我们想要的样式了。
- ending;
