Angular 2工具提示應自動調整位置本身在移動或當窗口調整大小

Question

我正在尋找Angular 2工具提示應該自動調整位置本身（至少從左側和右側）在移動或當窗口調整大小，以便它應完全顯示在屏幕上。我在Plunker上分享我的當前代碼，非常感謝任何人都可以幫助我解決這個問題。謝謝。

Tooltip Plunk

Tooltip Image

我使用這個位置功能：

private positionElements(hostEl: HTMLElement, targetEl: HTMLElement, positionStr: string, appendToBody: boolean = false): { top: number, left: number } { 
     let positionStrParts = positionStr.split("-"); 
     let pos0 = positionStrParts[0]; 
     let pos1 = positionStrParts[1] || "center"; 
     let hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl); 
     let targetElWidth = targetEl.offsetWidth; 
     let targetElHeight = targetEl.offsetHeight; 
     let shiftWidth: any = { 
      center: function(): number { 
       return hostElPos.left + hostElPos.width/2 - targetElWidth/2; 
      }, 
      left: function(): number { 
       return hostElPos.left; 
      }, 
      right: function(): number { 
       return hostElPos.left + hostElPos.width; 
      } 
     }; 

     let shiftHeight: any = { 
      center: function(): number { 
       return hostElPos.top + hostElPos.height/2 - targetElHeight/2; 
      }, 
      top: function(): number { 
       return hostElPos.top; 
      }, 
      bottom: function(): number { 
       return hostElPos.top + hostElPos.height; 
      } 
     }; 

     let targetElPos: { top: number, left: number }; 
     switch (pos0) { 
      case "right": 
       targetElPos = { 
        top: shiftHeight[pos1](), 
        left: shiftWidth[pos0]() 
       }; 
       break; 

      case "left": 
       targetElPos = { 
        top: shiftHeight[pos1](), 
        left: hostElPos.left - targetElWidth 
       }; 
       break; 

      case "bottom": 
       targetElPos = { 
        top: shiftHeight[pos0](), 
        left: shiftWidth[pos1](this.useAlternateMobileTooltip) 
       }; 
       break; 

      default: 
       targetElPos = { 
        top: hostElPos.top - targetElHeight, 
        left: shiftWidth[pos1]() 
       }; 
       break; 
     } 

     return targetElPos; 
    } 

    private position(nativeEl: HTMLElement): { width: number, height: number, top: number, left: number } { 
     let offsetParentBCR = { top: 0, left: 0 }; 
     const elBCR = this.offset(nativeEl); 
     const offsetParentEl = this.parentOffsetEl(nativeEl); 
     if (offsetParentEl !== window.document) { 
      offsetParentBCR = this.offset(offsetParentEl); 
      offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop; 
      offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft; 
     } 

     const boundingClientRect = nativeEl.getBoundingClientRect(); 
     return { 
      width: boundingClientRect.width || nativeEl.offsetWidth, 
      height: boundingClientRect.height || nativeEl.offsetHeight, 
      top: elBCR.top - offsetParentBCR.top, 
      left: elBCR.left - offsetParentBCR.left 
     }; 
    } 

    private offset(nativeEl: any): { width: number, height: number, top: number, left: number } { 
     const boundingClientRect = nativeEl.getBoundingClientRect(); 
     return { 
      width: boundingClientRect.width || nativeEl.offsetWidth, 
      height: boundingClientRect.height || nativeEl.offsetHeight, 
      top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop), 
      left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft) 
     }; 
    } 

    private getStyle(nativeEl: HTMLElement, cssProp: string): string { 
     if ((nativeEl as any).currentStyle) // IE 
      return (nativeEl as any).currentStyle[cssProp]; 

     if (window.getComputedStyle) 
      return (window.getComputedStyle(nativeEl) as any)[cssProp]; 

     // finally try and get inline style 
     return (nativeEl.style as any)[cssProp]; 
    } 

    private isStaticPositioned(nativeEl: HTMLElement): boolean { 
     return (this.getStyle(nativeEl, "position") || "static") === "static"; 
    } 

    private parentOffsetEl(nativeEl: HTMLElement): any { 
     let offsetParent: any = nativeEl.offsetParent || window.document; 
     while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) { 
      offsetParent = offsetParent.offsetParent; 
     } 
     return offsetParent || window.document; 
    } 

Answer 1

試試這個：左= hostElPos.left

工具提示的位置

工具提示的位置，距離操縱ht =當前窗口寬度 - hostElPos.left - hostElPos.width;

現在， 首先提示=從邊緣 留下最後提示最接近=從右邊緣

使用與中心功能此信息最接近的第一/最後提示應用樣式。使用移動媒體查詢。

HTML：

[class.alternate-left]="useLeft" 
[class.alternate-right]=「useRight" 

組件：

useLeft = false; 
useRight = false; 

let useWindowWidth = window.screen.width; 
     let targetElemetOnLeft = hostElPos.left; 
     let targetElemetOnRight = (useWindowWidth - hostElPos.left) - hostElPos.width; 
     this.useLeft = (hostElPos.width < 90 && targetElemetOnLeft < 30); 
     this.useRight = (hostElPos.width < 90 && targetElemetOnRight < 50); 

center: function (isLeft: boolean, isRight: boolean): number { 
       if (isLeft) { 
        return hostElPos.left; 
       } 
       else if (isRight) { 
        return hostElPos.left - targetElWidth; 
       } 
       else{ 
       return hostElPos.left + hostElPos.width/2 - targetElWidth/2; 
       } 

Working Plunk