L'info-bulle angulaire 2 devrait ajuster automatiquement la position elle-même dans mobile ou quand la fenêtre est redimensionnée

Question

Je cherche l'info-bulle angulaire 2 qui devrait ajuster automatiquement la position elle-même (de gauche et de droite au moins) dans mobile ou quand la fenêtre est redimensionnée devrait être visible sur l'écran complètement. Je partage mon code actuel sur Plunker, apprécie si quelqu'un peut m'aider à ce sujet. Merci.

Tooltip Plunk

Tooltip Image

Cette fonction de position J'utilise:

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

Essayez ceci:

emplacement infobulle de gauche = hostElPos.left

emplacement infobulle de plate-forme ht = largeur de fenêtre actuelle - hostElPos.left - hostElPos.width;

Maintenant, First infobulle = le plus proche du bord gauche Dernière infobulle = le plus proche du bord droit

Utilisez ces informations avec la fonction centrale pour appliquer le style au premier/dernier infobulle. Utiliser une requête multimédia pour mobile

HTML:

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

Composant:

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