.el-popover{
  position: absolute;
  background: $popover-fill;
  min-width: 150px;
  border-radius: 2px;
  border:1px solid $popover-border-color;
  padding: $popover-padding;
  z-index: $index-popper;
  font-size:$popover-font-size;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12),
              0 0 6px 0 rgba(0,0,0,.04);

  .popper-arrow,
  .popper-arrow::after{
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color:transparent;
    border-style: solid;
  }

  .popper-arrow{
    border-width: $popover-arrow-size;
  }

  .popper-arrow::after{
    content: " ";
    border-width: $popover-arrow-size;
  }

  &[x-placement^="top"]{
    margin-bottom: calc(#{$popover-arrow-size} + 6);

    .popper-arrow{
      bottom:-($popover-arrow-size);
      left: 50%;
      margin-right: calc(#{$tooltip-arrow-size} / 2);
      border-top-color: $popover-border-color;
      border-bottom-width: 0;

      &::after{
        bottom:1px;
        margin-left: -($popover-arrow-size);
        border-top-color:$popover-fill;
        border-bottom-width:0;
      }
    }
  }

  &[x-placement^="bottom"]{
    margin-top: calc(#{$popover-arrow-size} + 6);

    .popper-arrow{
      top:50%;
      left:-($popover-arrow-size);
      margin-bottom: calc(#{$tooltip-arrow-size / 2});
      border-top-color: $popover-border-color;
      border-bottom-width: 0;

      &::after{
        top:1px;
        margin-left: -($popover-arrow-size);
        border-top-width: 0;
        border-bottom-color: $popover-fill;
      }
    }
  }

  &[x-placement^="right"]{
    margin-left: calc(#{$popover-arrow-size} + 6);

    .popper-arrow{
      top:50%;
      left:-($popover-arrow-size);
      margin-bottom: calc(#{$tooltip-arrow-size} / 2);
      border-right-color:$popover-border-color;
      border-left-width: 0;

      &::after{
        left:1px;
        bottom: -($popover-arrow-size);
        border-right-color: $popover-fill;
        border-left-width: 0;
      }
    }
  }

  &[x-placement^="left"]{
    margin-right: calc(#{$popover-arrow-size} + 6);

    .popper-arrow{
      top:50%;
      right:-($popover-arrow-size);
      margin-bottom: calc(#{$tooltip-arrow-size} / 2);
      border-left-color: $popover-border-color;
      border-right-width: 0;

      &::after{
        right:1px;
        bottom:-($popover-arrow-size);
        margin-left: $popover-arrow-size;
        border-left-color: $popover-fill;
        border-right-width: 0;
      }
    }
  }

  .el-popover-title{
    color:$popover-title-color;
    font-size: $popover-title-font-size;
    line-height: 1;
    margin-bottom: 9px;
  }
}