Sindbad~EG File Manager

//
//  TOOLTIP COMPONENT
//
//  Tooltip is based on CSS only and show content from title="" tag.



.ps-tooltip {
  position: relative;

  &:hover {
    &:after {
      position: absolute;
      right: 0;
      bottom: 100%;
      display: none;
      padding: $padding-sm;
      background-color: rgba(0,0,0, .8);
      white-space: nowrap;
      content: attr(data-tooltip);
      color: #ddd;
      font-size: 12px;
      z-index: 10;

      @extend %radius--sm;

      @include media('large') {
        display: block !important;
      }
    }
  }
}

.ps-tooltip--postbox {
  &:hover {
    &:after {
      left: 50%;
      right: auto;
      transform: translateX(-50%);
    }
  }
}

.ps-tooltip--reaction {
  &:hover {
    &:after {
      left: 50%;
      right: auto;
      bottom: 110%;
      padding: 6px;
      font-size: 10px;
      line-height: 1;
      transform: translateX(-50%)
    }
  }
}


.ps-tooltip--notification {
  &:hover {
    &:after {
      top: 50%;
      left: 100%;
      right: auto;
      bottom: auto;
      transform: translateY(-50%);
      padding: 4px 8px;
    }
  }
}


.ps-tooltip--group-privacy {
  &:hover {
    &:after {
      min-width: 300px;
      left: 0;
      right: auto;
      white-space: pre-wrap;
    }
  }
}


.ps-tooltip--online {
  &:hover {
    &:after {
      left: 20px;
      right: auto;
      bottom: -2px;
      padding: 4px;
      line-height: 1;
    }
  }
}


.ps-tooltip--permalink {
  &:hover {
    &:after {
      display: block;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
    }
  }
}


.ps-tooltio--focus-box {
  &:hover {
    &:before{
      position: absolute;
      display: none;
      top: 31px;
      left: 70px;
      bottom: auto;
      border: solid;
      border-color: rgba(0,0,0, .8) transparent;
      border-width: 6px 6px 0 6px;
      content: '';

      @include media('large') {
        display: block !important;
      }
    }

    &:after {
      top: 0;
      left: 14px;
      right: auto;
      bottom: auto;
      font-size: 12px;
    }
  }
}