element ui Tooltip 样式修改

原：

image.png

修改好：

image.png

源码

<el-tooltip placement="bottom" effect="dark" popper-class="draw_share_atooltip" class="grayg">
          <div slot="content" class="biaoji">
            <div v-if="item.important === 0" slot="reference" class="red" @click="showModel(item.id,1)" />
            <div v-if="item.important === 1" slot="reference" class="gray" @click="showModel(item.id,0)" />
          </div>
          <el-button>标记</el-button>
        </el-tooltip>

<style lang="scss">// style里 不能设置scoped
.grayg {
    color: #CFCFCF;
    padding: 0;
    font-size: 14px;
    width: 36px;
    height: 21px;
    background: #EEEEEE;
    opacity: 1;
    border-radius: 2px;
    border:none;
    &:hover {
       color: #CFCFCF;
       background: #EEEEEE;
    }
}
//箭头颜色
.el-tooltip__popper[x-placement^=bottom] .popper__arrow::after {
   border-bottom-color: #fff;
}
.el-tooltip__popper[x-placement^=bottom] .popper__arrow{
    border-bottom-color: #fff;
}
//背景颜色
.draw_share_atooltip{
   background: #fff !important;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
 }
</style>

<style lang="scss" scoped>
    .biaoji {
        .red {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #FB231F;
            // margin-bottom: 10px;
            &:hover {
                background-color: #FB231F;
            }
        }
        .gray {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #CFCFCF;
            &:hover {
                background-color: #CFCFCF;
            }
        }