// Creating a CSS3 only tooltip to show people what certain buttons do
.docman_tooltip {
  position: relative;

  &:after,
  &:before {
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
  }

  @include rtl {
    &:after,
    &:before {
      left: auto;
      right: 100%;
    }
  }

  &:after {
    content: attr(title);
    min-width: 125px;
    white-space: nowrap;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    text-shadow: none;
    padding: .5em 1em;
    border-radius: 5px;
    margin-top: -.5em;
    margin-left: 17px;

    @include rtl {
      margin-left: 0;
      margin-right: 17px;
    }
  }

  &:before {
    content: "";
    width: 0;
    height: 0;
    border-top: .75em solid transparent;
    border-bottom: .75em solid transparent;
    border-right: .75em solid rgba(0, 0, 0, .8);
    margin-left: 10px;
    margin-top: .25em;

    @include rtl {
      border-right: none;
      border-left: .75em solid rgba(0, 0, 0, .8);
      margin-left: 0;
      margin-right: 10px;
    }
  }

  &:hover:before, &:hover:after {
    display: block;
  }
}