Javascript Angular 2工具提示应在移动或调整窗口大小时自动调整位置本身

我正在寻找Angular 2工具提示，它应该在手机中或调整窗口大小时自动调整位置（至少从左到右），以便在屏幕上完全可见。我正在分享我在Plunker上的当前代码，如果有人能在这方面帮助我，我将不胜感激。谢谢

我正在使用的此职位功能：

 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;
    }

试试这个：

左侧的工具提示位置=hostElPos.left

右起的工具提示位置=当前窗口宽度-hostElPos.left-hostElPos.width

现在,， 第一个工具提示=离左边缘最近 最后一个工具提示=距离右边缘最近

将此信息与“中心”功能一起使用，在第一个/最后一个工具提示上应用样式。使用移动媒体查询

HTML:

组成部分：

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;
                }

useLeft=false；
useRight=false；
让我们使用windowwidth=window.screen.width；
设targetElemetOnLeft=hostElPos.left；
让targetElemetOnRight=（useWindowWidth-hostElPos.left）-hostElPos.width；
this.uselft=（hostElPos.width<90&&targetElemetOnLeft<30）；
this.userlight=（hostElPos.width<90&&targetElemetOnRight<50）；
中心：函数（isLeft:boolean，isRight:boolean）：数字{
if（isLeft）{
返回hostElPos.left；
}
否则，如果（isRight）{
返回hostElPos.left-targetElWidth；
}
否则{
返回hostElPos.left+hostElPos.width/2-targetElWidth/2；
}

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;
                }