docs: function(pos) {
                  var
                      placement,
                      container = this.options.container,
                      clientWidth = container.innerWidth(),
                      clientHeight = container.innerHeight(),
                      scrollTop = container.scrollTop(),
                      scrollLeft = container.scrollLeft(),
                      pageX = Math.max(0, pos.left - scrollLeft),
                      pageY = Math.max(0, pos.top - scrollTop);
                  //arrowSize = 20;
  
                  //if placement equals auto，caculate the placement by element information;
                  if (typeof(this.options.placement) === 'function') {
                      placement = this.options.placement.call(this, this.getTarget()[0], this.$element[0]);
                  } else {
                      placement = this.$element.data('placement') || this.options.placement;
                  }
  
                  var isH = placement === 'horizontal';
                  var isV = placement === 'vertical';
                  var detect = placement === 'auto' || isH || isV;
  
                  if (detect) {
                      if (pageX < clientWidth / 3) {
                          if (pageY < clientHeight / 3) {
                              placement = isH ? 'right-bottom' : 'bottom-right';
                          } else if (pageY < clientHeight * 2 / 3) {
                              if (isV) {
                                  placement = pageY <= clientHeight / 2 ? 'bottom-right' : 'top-right';
                              } else {
                                  placement = 'right';
                              }
                          } else {
                              placement = isH ? 'right-top' : 'top-right';
                          }
                          //placement= pageY>targetHeight+arrowSize?'top-right':'bottom-right';
                      } else if (pageX < clientWidth * 2 / 3) {
                          if (pageY < clientHeight / 3) {
                              if (isH) {
                                  placement = pageX <= clientWidth / 2 ? 'right-bottom' : 'left-bottom';
                              } else {
                                  placement = 'bottom';
                              }
                          } else if (pageY < clientHeight * 2 / 3) {
                              if (isH) {
                                  placement = pageX <= clientWidth / 2 ? 'right' : 'left';
                              } else {
                                  placement = pageY <= clientHeight / 2 ? 'bottom' : 'top';
                              }
                          } else {
                              if (isH) {
                                  placement = pageX <= clientWidth / 2 ? 'right-top' : 'left-top';
                              } else {
                                  placement = 'top';
                              }
                          }
                      } else {
                          //placement = pageY>targetHeight+arrowSize?'top-left':'bottom-left';
                          if (pageY < clientHeight / 3) {
                              placement = isH ? 'left-bottom' : 'bottom-left';
                          } else if (pageY < clientHeight * 2 / 3) {
                              if (isV) {
                                  placement = pageY <= clientHeight / 2 ? 'bottom-left' : 'top-left';
                              } else {
                                  placement = 'left';
                              }
                          } else {
                              placement = isH ? 'left-top' : 'top-left';
                          }
                      }
                  } else if (placement === 'auto-top') {
                      if (pageX < clientWidth / 3) {
                          placement = 'top-right';
                      } else if (pageX < clientWidth * 2 / 3) {
                          placement = 'top';
                      } else {
                          placement = 'top-left';
                      }
                  } else if (placement === 'auto-bottom') {
                      if (pageX < clientWidth / 3) {
                          placement = 'bottom-right';
                      } else if (pageX < clientWidth * 2 / 3) {
                          placement = 'bottom';
                      } else {
                          placement = 'bottom-left';
                      }
                  } else if (placement === 'auto-left') {
                      if (pageY < clientHeight / 3) {
                          placement = 'left-top';
                      } else if (pageY < clientHeight * 2 / 3) {
                          placement = 'left';
                      } else {
                          placement = 'left-bottom';
                      }
                  } else if (placement === 'auto-right') {
                      if (pageY < clientHeight / 3) {
                          placement = 'right-bottom';
                      } else if (pageY < clientHeight * 2 / 3) {
                          placement = 'right';
                      } else {
                          placement = 'right-top';
                      }
                  }
                  return placement;
              }