.common-tips-hide{
  display: none;
}
.common-tips-container{
  width:auto;
  padding:5px;
  font-size:14px;
  color: #999999;
  border:1px #bebebe solid;
  position: absolute;
  top:0;
  left:200px;
  /*border-radius: 5px;*/
}
.common-tips-animation{
  animation:common-tips-show 0.3s ease-in;
  -webkit-animation:common-tips-show 0.3s ease-in; /* Safari 和 Chrome */
}
/*动画效果从下往上, 从左往右*/
.common-tips-top-right{
  transform-origin: 10% 100%;
}
.common-tips-top-right:after {
  bottom: -7px;
  left: 16px;
  position: absolute;
  width: 12px;
  height: 12px;
  content: " ";
  transform: rotate(45deg);
  border: 1px solid #bebebe;
  border-top: 0;
  border-left: 0;
  background-color: #fff;
}

/*动画效果从下往上, 从右往左*/
.common-tips-top-left{
  transform-origin: 90% 100%;
}
.common-tips-top-left:after {
  bottom: -7px;
  right: 16px;
  left:unset;
  position: absolute;
  width: 12px;
  height: 12px;
  content: " ";
  transform: rotate(45deg);
  border: 1px solid #ecedee;
  border-top: 0;
  border-left: 0;
  background-color: #fff;
}

/*动画效果从上往下, 从右往左*/
.common-tips-bottom-right{
  transform-origin: 10% 10%;
}
.common-tips-bottom-right:after {
  top: -7px;
  left: 16px;
  position: absolute;
  width: 12px;
  height: 12px;
  content: " ";
  transform: rotate(45deg);
  border: 1px solid #ecedee;
  border-bottom: 0;
  border-right: 0;
  background-color: #fff;
}

/*动画效果从上往下, 从左往右*/
.common-tips-bottom-left{
  transform-origin: 90% 10%;
}
.common-tips-bottom-left:after {
  top: -7px;
  right: 16px;
  left:unset;
  position: absolute;
  width: 12px;
  height: 12px;
  content: " ";
  transform: rotate(45deg);
  border: 1px solid #ecedee;
  border-bottom: 0;
  border-right: 0;
  background-color: #fff;
}
.common-tips-container-hide{
  animation:common-tips-hide 0.3s ease-out;
  -webkit-animation:common-tips-hide 0.3s ease-out; /* Safari 和 Chrome */
}

/*动画效果从上往下, 从左往右*/
.common-tips-right-right{
  transform-origin: 0% 10%;
}
.common-tips-right-right:after{
  left: -7px;
  top: 13px;
  position: absolute;
  width: 12px;
  height: 12px;
  content: " ";
  transform: rotate(45deg);
  border: 1px solid #ecedee;
  border-top: 0;
  border-right: 0;
  background-color: #fff;

}

/*动画效果从上往下, 从左往右*/
.common-tips-left-left{
  transform-origin: 100% 10%;
}
.common-tips-left-left:after{
  right: -7px;
  top: 13px;
  position: absolute;
  width: 12px;
  height: 12px;
  content: " ";
  transform: rotate(45deg);
  border: 1px solid #ecedee;
  border-bottom: 0;
  border-left: 0;
  background-color: #fff;
  opacity: 1;

}

@keyframes common-tips-show {
  0%{
    opacity:0;
    transform: scale(0.6);
  }
  100%{
    opacity:1;
    transform: scale(1);
  }
}


@keyframes common-tips-hide {
  0%{
    opacity:1;
    transform: scale(1);
  }
  100%{
    opacity:0;
    transform: scale(0.6);
  }
}