index.css

.pop-tips{
  text-align: center;
  border-radius: 4px;
  visibility: visible;
  padding:9px 8px;
  box-shadow: 0px 4px 10px 0px rgba(29, 29, 29, 0.15);
	color: white;
}

.pop-tips--danger{
	color: white;
	background-color:#F56C6C;
}

.pop-tips--light{
	color: #F56C6C;
	background-color:#ffffff;
}

.pop-tips--danger.el-popper[x-placement^=right] .popper__arrow::after{
	border-right-color:#F56C6C;
}

.pop-tips--light.el-popper[x-placement^=right] .popper__arrow::after{
	border-right-color:#ffffff;
}

.pop-tips--danger.el-popper[x-placement^=top] .popper__arrow::after{
	border-top-color:#F56C6C;
}

.pop-tips--light.el-popper[x-placement^=top] .popper__arrow::after{
	border-top-color:#ffffff;
}

.pop-tips--danger.el-popper[x-placement^=bottom] .popper__arrow::after{
	border-bottom-color:#F56C6C;
}

.pop-tips--light.el-popper[x-placement^=bottom] .popper__arrow::after{
	border-bottom-color:#ffffff;
}









.pop-tips--hidden{
  visibility: hidden !important;
}


.pop-tips__top{
  bottom:calc(100% + 8px);
}

.pop-tips__right{
  left:calc(100% + 8px);
  top:0;
}

.pop-tips__bottom{
  top:calc(100% + 8px);
}


.pop-tips__top::after {
	content: " ";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
  border-style: solid;
  border-width: 5px;
	border-style: solid;
	border-color: #F56C6C transparent transparent transparent;
}

.pop-tips__right::after {
	content: " ";
	position: absolute;
	top: 50%;
	left: 0%;
  margin-top: -5px;
	margin-left: -10px;
	border-width: 5px;
  border-style: solid;
	border-style: solid;
	border-color: transparent #F56C6C transparent transparent;
}