.video-range-editor-container {
  *[videotip]:before
  {
    content: "";
    position: absolute;
    border-bottom: 6px solid #000;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    visibility: hidden;
    opacity: 0; // for animation
    left: -12px;
    z-index: 9000;
  }
  *[videotip]:after
  {
    position: absolute;
    content: attr(videotip);
    left: -26px;
    white-space: normal;
    background: #000;
    color: #FFFFFF;
    padding: 4px 6px;
    border-radius: 4px;
    visibility: hidden;
    opacity: 0; // for animation

    z-index: 9001;
    line-height: 15px;
    font-size: 12px;
  }

  *[videotip]:hover:before, *[videotip]:hover:after
  {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease-in;
  }

  button[videotip]{
    // arrow
    &:before {
      top: 26px;
      left: 15px;
    }
    // content
    &:after {
      top: 32px;
      left: -20px;
      width: 80px;
    }
  }

  span[videotip]{
    // arrow
    &:before {
      top: 18px;
      left: 45%;
    }
    // content
    &:after {
      top: 24px;
      left: 0px;
      width: 100%;
    }
  }



}
