.qeek-tip-trigger {
  display: inline-block;
  cursor: pointer; }

.qeek-tip {
  position: absolute;
  max-width: 260px; }
  .qeek-tip-content {
    box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.22);
    padding: 8px 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.9);
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 13px;
    display: inline-block; }
  .qeek-tip-arrow {
    position: absolute;
    width: 14px;
    height: 14px;
    overflow: hidden;
    cursor: pointer; }
    .qeek-tip-arrow > span {
      position: absolute;
      display: block;
      width: 10px;
      height: 10px;
      background-color: rgba(0, 0, 0, 0.9);
      transform: rotate(45deg); }
    .qeek-tip-arrow-top {
      bottom: -13px;
      left: 50%;
      margin-left: -6px; }
      .qeek-tip-arrow-top > span {
        left: 2px;
        top: -5px; }
    .qeek-tip-arrow-topLeft {
      bottom: -13px;
      left: 12px; }
      .qeek-tip-arrow-topLeft > span {
        left: 2px;
        top: -5px; }
    .qeek-tip-arrow-topRight {
      bottom: -13px;
      right: 12px; }
      .qeek-tip-arrow-topRight > span {
        left: 2px;
        top: -5px; }
    .qeek-tip-arrow-bottom {
      top: -13px;
      left: 50%;
      margin-left: -6px; }
      .qeek-tip-arrow-bottom > span {
        left: 2px;
        bottom: -5px; }
    .qeek-tip-arrow-bottomLeft {
      top: -13px;
      left: 12px; }
      .qeek-tip-arrow-bottomLeft > span {
        left: 2px;
        bottom: -5px; }
    .qeek-tip-arrow-bottomRight {
      top: -13px;
      right: 12px; }
      .qeek-tip-arrow-bottomRight > span {
        left: 2px;
        bottom: -5px; }
    .qeek-tip-arrow-left {
      right: -13px;
      top: 50%;
      margin-top: -6px; }
      .qeek-tip-arrow-left > span {
        top: 2px;
        left: -4px; }
    .qeek-tip-arrow-leftTop {
      right: -13px;
      top: 8px; }
      .qeek-tip-arrow-leftTop > span {
        top: 2px;
        left: -4px; }
    .qeek-tip-arrow-leftBottom {
      right: -13px;
      bottom: 8px; }
      .qeek-tip-arrow-leftBottom > span {
        top: 2px;
        left: -4px; }
    .qeek-tip-arrow-right {
      left: -13px;
      top: 50%;
      margin-top: -6px; }
      .qeek-tip-arrow-right > span {
        top: 2px;
        right: -4px; }
    .qeek-tip-arrow-rightTop {
      left: -13px;
      top: 8px; }
      .qeek-tip-arrow-rightTop > span {
        top: 2px;
        right: -4px; }
    .qeek-tip-arrow-rightBottom {
      left: -13px;
      bottom: 8px; }
      .qeek-tip-arrow-rightBottom > span {
        top: 2px;
        right: -4px; }
  .qeek-tip-light .qeek-tip-content {
    background: #F7FBFF;
    color: #222222;
    border: 1px solid #3570E6;
    box-shadow: 0px -2px 10px 0px rgba(3, 22, 58, 0.15); }
  .qeek-tip-light .qeek-tip-arrow > span {
    width: 8px;
    height: 8px;
    background: #F7FBFF;
    border: 1px solid #3570E6; }

.fade-enter {
  opacity: 0;
  animation-duration: .5s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
  animation-play-state: paused; }

.fade-appear {
  opacity: 0;
  animation-duration: .5s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
  animation-play-state: paused; }

.fade-leave {
  animation-duration: .5s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
  animation-play-state: paused; }

.fade-enter.fade-enter-active {
  animation-name: fadeIn;
  animation-play-state: running; }

.fade-appear.fade-appear-active {
  animation-name: fadeIn;
  animation-play-state: running; }

.fade-leave.fade-leave-active {
  animation-name: fadeOut;
  animation-play-state: running; }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }