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