@ustack/uskin/css/components/tooltip.less

A graceful framework which provides developers another chance to build an amazing site.

@tooltip_line_height: 15px;
@tooltip_padding: 8px;
@tooltip_border_radius: @border_radius;
@tooltip_border_color: @color_info;
@tooltip_bg_color: @color_info_100;
@tooltip_error_bg_color: @color_delete_100;
@tooltip_error_border_color: @color_delete;

@tooltip_arrow_width: 6px;
@tooltip_arrow_color: @color_info;
@tooltip_error_arrow_color: @color_delete;
@tooltip_arrow_margin: 8px;
@tooltip_zindex: 1000;

.tooltip {
  position: absolute;
  display: block;
  z-index: @tooltip_zindex;
  border: 1px solid @tooltip_border_color;
  background-color: @tooltip_bg_color;
  border-radius: @tooltip_border_radius;
  line-height: @tooltip_line_height;
  padding: @tooltip_padding;

  &:before,
  &:after {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
  }
  &:before {
    border-width: @tooltip_arrow_width+1;
  }
  &:after {
    border-width: @tooltip_arrow_width;
  }

  &.tooltip-error {
    background-color: @tooltip_error_bg_color;
    border: 1px solid @tooltip_error_border_color;
  }

  &.tooltip-top,
  &.tooltip-top-left,
  &.tooltip-top-right {
    &:before {
      border-top-color: @tooltip_arrow_color;
    }
    &:after {
      border-top-color: @tooltip_bg_color;
    }
    &.tooltip-error {
      &:before {
      border-top-color: @tooltip_error_arrow_color;
      }
      &:after {
        border-top-color: @tooltip_error_bg_color;
      }
    }
  }

  &.tooltip-right,
  &.tooltip-right-top,
  &.tooltip-right-bottom {
    &:before {
      border-right-color: @tooltip_arrow_color;
    }
    &:after {
      border-right-color: @tooltip_bg_color;
    }
    &.tooltip-error {
      &:before {
      border-right-color: @tooltip_error_arrow_color;
      }
      &:after {
        border-right-color: @tooltip_error_bg_color;
      }
    }
  }

  &.tooltip-bottom,
  &.tooltip-bottom-left,
  &.tooltip-bottom-right {
    &:before {
      border-bottom-color: @tooltip_arrow_color;
    }
    &:after {
      border-bottom-color: @tooltip_bg_color;
    }
    &.tooltip-error {
      &:before {
      border-bottom-color: @tooltip_error_arrow_color;
      }
      &:after {
        border-bottom-color: @tooltip_error_bg_color;
      }
    }
  }

  &.tooltip-left,
  &.tooltip-left-top,
  &.tooltip-left-bottom {
    &:before {
      border-left-color: @tooltip_arrow_color;
    }
    &:after {
      border-left-color: @tooltip_bg_color;
    }
    &.tooltip-error {
      &:before {
      border-left-color: @tooltip_error_arrow_color;
      }
      &:after {
        border-left-color: @tooltip_error_bg_color;
      }
    }
  }

  &.tooltip-top {
    &:before {
      left: 50%;
      top: 100%;
      margin-left: -1-@tooltip_arrow_width;
    }
    &:after {
      left: 50%;
      top: 100%;
      margin-left: -@tooltip_arrow_width;
    }
  }
  &.tooltip-top-left {
    &:before {
      left: @tooltip_arrow_margin;
      top: 100%;
    }
    &:after {
      left: 1+@tooltip_arrow_margin;
      top: 100%;
    }
  }
  &.tooltip-top-right {
    &:before {
      right: @tooltip_arrow_margin;
      top: 100%;
    }
    &:after {
      right: 1+@tooltip_arrow_margin;
      top: 100%;
    }
  }
  &.tooltip-right {
    &:before {
      right: 100%;
      top: 50%;
      margin-top: -1-@tooltip_arrow_width;
    }
    &:after {
      right: 100%;
      top: 50%;
      margin-top: -@tooltip_arrow_width;
    }
  }
  &.tooltip-right-top {
    &:before {
      right: 100%;
      top: 2px;
    }
    &:after {
      right: 100%;
      top: 3px;
    }
  }
  &.tooltip-right-bottom {
    &:before {
      right: 100%;
      bottom: 2px;
    }
    &:after {
      right: 100%;
      bottom: 3px;
    }
  }
  &.tooltip-bottom {
    &:before {
      left: 50%;
      bottom: 100%;
      margin-left: -1-@tooltip_arrow_width;
    }
    &:after {
      left: 50%;
      bottom: 100%;
      margin-left: -@tooltip_arrow_width;
    }
  }
  &.tooltip-bottom-left {
    &:before {
      left: @tooltip_arrow_margin;
      bottom: 100%;
    }
    &:after {
      left: 1+@tooltip_arrow_margin;
      bottom: 100%;
    }
  }
  &.tooltip-bottom-right {
    &:before {
      right: @tooltip_arrow_margin;
      bottom: 100%;
    }
    &:after {
      right: 1+@tooltip_arrow_margin;
      bottom: 100%;
    }
  }
  &.tooltip-left {
    &:before {
      left: 100%;
      top: 50%;
      margin-top: -1-@tooltip_arrow_width;
    }
    &:after {
      left: 100%;
      top: 50%;
      margin-top: -@tooltip_arrow_width;
    }
  }
  &.tooltip-left-top {
    &:before {
      left: 100%;
      top: 2px;
    }
    &:after {
      left: 100%;
      top: 3px;
    }
  }
  &.tooltip-left-bottom {
    &:before {
      left: 100%;
      bottom: 2px;
    }
    &:after {
      left: 100%;
      bottom: 3px;
    }
  }
}