@charset "UTF-8";

@import "variables";
@import "mixin";
@import "icon";

//文字提示，topleft top topright


@mixin tooltipsBase {
  .tooltips {
    max-width: 250px;
    padding: 8px 10px;
    text-align: left;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 1px 6px hsla(0, 0%, 39%, 0.2);
    position: absolute;
    border: 1px #e5e5e5 solid;
    .i-tipsarrow {
      position: absolute;
    }
    .txt {
      font-size: 12px;
      color: #666;
    }
  }
}

@mixin tooltips($type: top) {
  @if $type == top {
    .tooltips-topleft {
      @include setIconPos(i-tipsarrow, -2px 0);
      .i-tipsarrow {
        top: -9px;
        left: 10px;
      }
    }
    .tooltips-topright {
      @include setIconPos(i-tipsarrow, -2px 0);
      .i-tipsarrow {
        top: -9px;
        right: 10px;
      }
    }
  }
  @if $type == bottom {
    .tooltips-btleft {
      @include setIconPos(i-tipsarrow, -18px 0);
      .i-tipsarrow {
        bottom: -14px;
        left: 10px;
      }
    }
    .tooltips-btright {
      @include setIconPos(i-tipsarrow, -18px 0);
      .i-tipsarrow {
        bottom: -14px;
        right: 10px;
      }
    }
  }
  @if $type == left {
    .tooltips-left {
      @include setIconPos(i-tipsarrow, -34px 0);
      .i-tipsarrow {
        top: 50%;
        margin-top: -8px;
        left: -10px;
      }
    }
  }
  @if $type == right {
    .tooltips-right {
      @include setIconPos(i-tipsarrow, -50px 0);
      .i-tipsarrow {
        top: 50%;
        margin-top: -8px;
        right: -10px;
      }
    }
  }
}