src/app/common/components/tooltip/tooltip.component.html

@@ -7,9 +7,11 @@
   <div class="m-tooltip--bubble"
     [class.m-tooltip--bubble--fixed]="useParentPosition"
     [style.top.px]="useParentPosition ? offsetTop : false"
-    [class.m-tooltip--bubble--anchor-bottom]="anchor == 'bottom'"
-    [class.m-tooltip--bubble--anchor-left]="anchor == 'left'"
-    [class.m-tooltip--bubble--anchor-right]="anchor == 'right'"
+    [style.right.px]="useParentPosition ? offsetRight : false"
+    [style.left.px]="useParentPosition ? offsetLeft : false"
+    [class.m-tooltip--bubble--anchor-bottom]="!useParentPosition && anchor == 'bottom'"
+    [class.m-tooltip--bubble--anchor-left]="!useParentPosition && anchor == 'left'"
+    [class.m-tooltip--bubble--anchor-right]="!useParentPosition && anchor == 'right'"
     [hidden]="hidden"
   >
     <ng-content></ng-content>

src/app/common/components/tooltip/tooltip.component.ts

@@ -4,18 +4,20 @@ import { Component, ElementRef, Input } from '@angular/core';
   selector: 'm-tooltip',
   templateUrl: 'tooltip.component.html',
   host: {
-    '(mouseenter)': 'setHidden(false)',
-    '(mouseleave)': 'setHidden(true)'
+    '(mouseover)': 'setHidden(false)',
+    '(mouseout)': 'setHidden(true)'
   }
 })
 export class TooltipComponent {
   @Input() icon;
-  @Input() anchor;
+  @Input() anchor: 'top' | 'bottom' | 'right' | 'left';
   @Input() iconClass;
   @Input() useParentPosition: boolean = false;
 
   hidden: boolean = true;
   offsetTop: number = 0;
+  offsetRight: number = 0;
+  offsetLeft: number = 0;
 
   constructor(private element: ElementRef) {
 
@@ -25,8 +27,79 @@ export class TooltipComponent {
     this.hidden = value;
 
     if (!this.hidden && this.useParentPosition) {
-      const clientRect = this.element.nativeElement.parentElement.getBoundingClientRect();
-      this.offsetTop = clientRect.top + clientRect.height - 8;
+
+      switch (this.anchor) {
+        case 'top':
+          this.anchorTop();
+          break;
+        case 'bottom':
+          this.anchorBottom();
+          break;
+        case 'left':
+          this.anchorLeft();
+          break;
+        case 'right':
+          this.anchorRight();
+          break;
+      }
+
     }
   }
+
+  anchorTop() {
+    this.resetOffsets();
+
+    const clientRect: ClientRect = this.element.nativeElement.parentElement.getBoundingClientRect();
+    this.offsetTop = clientRect.top + clientRect.height - 8;
+
+    let left = clientRect.left;
+
+    this.offsetLeft = Math.abs(left);
+  }
+
+  anchorBottom() {
+    this.resetOffsets();
+
+    const clientRect: ClientRect = this.element.nativeElement.parentElement.getBoundingClientRect();
+    this.offsetTop = clientRect.bottom;
+
+    let left = clientRect.left;
+
+    this.offsetLeft = Math.abs(left);
+  }
+
+  anchorLeft() {
+    this.resetOffsets();
+
+    const clientRect: ClientRect = this.element.nativeElement.parentElement.getBoundingClientRect();
+    this.offsetTop = clientRect.top;
+
+    let left = clientRect.left + clientRect.width;
+
+    if (left + clientRect.width >= window.innerWidth) {
+      this.offsetRight = window.innerWidth - clientRect.right + clientRect.width;
+    } else {
+      this.offsetLeft = Math.abs(left);
+    }
+  }
+
+  anchorRight() {
+    this.resetOffsets();
+
+    const clientRect: ClientRect = this.element.nativeElement.parentElement.getBoundingClientRect();
+    this.offsetTop = clientRect.top;
+
+    let right = window.innerWidth - clientRect.left;
+
+    if (right >= window.innerWidth) {
+      right = 0;
+      this.offsetLeft = clientRect.left + clientRect.width;
+    }
+
+    this.offsetRight = Math.abs(right);
+  }
+
+  resetOffsets() {
+    this.offsetTop = this.offsetLeft = this.offsetRight = undefined;
+  }
 }

src/app/modules/groups/sidebar-markers/sidebar-markers.component.html

@@ -2,7 +2,7 @@
   <li style="display:flex">
     <a [routerLink]="['/groups/create']">
       <m-tooltip
-        anchor="right"
+        [anchor]="tooltipsAnchor"
         [useParentPosition]="true"
       >
         <i class="material-icons" m-tooltip--anchor>add</i>
@@ -18,7 +18,7 @@
   <li *ngFor="let group of groups" [class.has-marker]="group.hasMarker">
     <a [routerLink]="['/groups/profile', group.guid]">
       <m-tooltip
-        anchor="right"
+        [anchor]="tooltipsAnchor"
         [useParentPosition]="true"
       >
         <img [class.m-pulsating--small]="group.hasGathering$ | async" [src]="'fs/v1/avatars/' + group.guid + '/' + group.icontime" m-tooltip--anchor/>
@@ -35,7 +35,7 @@
   <li *ngIf="(!groups || groups.length === 0) && !inProgress">
     <a [routerLink]="['/groups/top']">
       <m-tooltip
-        anchor="right"
+        [anchor]="tooltipsAnchor"
         [useParentPosition]="true"
       >
         <img src="https://cdn-assets.minds.com/front/dist/en/assets/logos/bulb.svg" m-tooltip--anchor/>

src/app/modules/groups/sidebar-markers/sidebar-markers.component.scss

@@ -132,7 +132,6 @@
 
   .m-tooltip--bubble--anchor-right {
     margin-top: -36px;
-    margin-right: 40px;
     text-align: right;
     width: auto;
     max-width: 200px;

src/app/modules/groups/sidebar-markers/sidebar-markers.component.ts

-import { Component, ComponentFactoryResolver, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { Component, ComponentFactoryResolver, ViewChild, ChangeDetectorRef, HostListener } from '@angular/core';
 import { interval, timer } from 'rxjs';
 import { startWith, map, tap, throttle } from 'rxjs/operators';
 
@@ -19,6 +19,7 @@ export class GroupsSidebarMarkersComponent {
   groups = [];
   offset = 0;
   moreData: boolean = true;
+  tooltipsAnchor: string = 'right';
 
   @ViewChild('list') list;
 
@@ -31,6 +32,7 @@ export class GroupsSidebarMarkersComponent {
   }
 
   async ngOnInit() {
+    this.onResize();
     await this.load(true);
     this.listenForMarkers();
   }
@@ -102,4 +104,8 @@ export class GroupsSidebarMarkersComponent {
     this.cd.detectChanges();
   }
 
+  @HostListener('window:resize') onResize() {
+    this.tooltipsAnchor = window.innerWidth <= 992 ? 'top' : 'right';
+  }
+
 }