Fixed: Tooltip jumping around

Fixes: #5136
Fixes: #4966
Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js

@@ -170,6 +170,7 @@ class AddNewMovieSearchResult extends Component {
                     imdbId={imdbId}
                   />
                 }
+                canFlip={true}
                 kind={kinds.INVERSE}
                 position={tooltipPositions.BOTTOM}
               />

frontend/src/Components/Tooltip/Tooltip.css

@@ -156,3 +156,35 @@
 .body {
   padding: 5px;
 }
+
+.verticalContainer {
+  max-height: 300px;
+}
+
+.horizontalContainer {
+  max-width: calc($breakpointExtraSmall - 20px);
+}
+
+@media only screen and (min-width: $breakpointExtraSmall) {
+  .horizontalContainer {
+    max-width: calc($breakpointSmall * 0.8);
+  }
+}
+
+@media only screen and (min-width: $breakpointSmall) {
+  .horizontalContainer {
+    max-width: calc($breakpointMedium * 0.8);
+  }
+}
+
+@media only screen and (min-width: $breakpointMedium) {
+  .horizontalContainer {
+    max-width: calc($breakpointLarge * 0.8);
+  }
+}
+
+/* @media only screen and (max-width: $breakpointLarge) {
+  .horizontalContainer {
+    max-width: calc($breakpointLarge * 0.8);
+  }
+} */

frontend/src/Components/Tooltip/Tooltip.js

@@ -4,9 +4,30 @@ import React, { Component } from 'react';
 import { Manager, Popper, Reference } from 'react-popper';
 import Portal from 'Components/Portal';
 import { kinds, tooltipPositions } from 'Helpers/Props';
+import dimensions from 'Styles/Variables/dimensions';
 import { isMobile as isMobileUtil } from 'Utilities/mobile';
 import styles from './Tooltip.css';
 
+let maxWidth = null;
+
+function getMaxWidth() {
+  const windowWidth = window.innerWidth;
+
+  if (windowWidth > parseInt(dimensions.breakpointLarge)) {
+    maxWidth = 800;
+  }
+
+  if (windowWidth > parseInt(dimensions.breakpointMedium)) {
+    maxWidth = 650;
+  }
+
+  if (windowWidth > parseInt(dimensions.breakpointSmall)) {
+    maxWidth = 500;
+  }
+
+  maxWidth = 450;
+}
+
 class Tooltip extends Component {
 
   //
@@ -17,6 +38,7 @@ class Tooltip extends Component {
 
     this._scheduleUpdate = null;
     this._closeTimeout = null;
+    this._maxWidth = maxWidth || getMaxWidth();
 
     this.state = {
       isOpen: false
@@ -54,9 +76,11 @@ class Tooltip extends Component {
     } else if ((/^bottom/).test(data.placement)) {
       data.styles.maxHeight = windowHeight - bottom - 20;
     } else if ((/^right/).test(data.placement)) {
-      data.styles.maxWidth = windowWidth - right - 50;
+      data.styles.maxWidth = Math.min(this._maxWidth, windowWidth - right - 20);
+      data.styles.maxHeight = top - 20;
     } else {
-      data.styles.maxWidth = left - 35;
+      data.styles.maxWidth = Math.min(this._maxWidth, left - 20);
+      data.styles.maxHeight = top - 20;
     }
 
     return data;
@@ -144,10 +168,16 @@ class Tooltip extends Component {
             {({ ref, style, placement, arrowProps, scheduleUpdate }) => {
               this._scheduleUpdate = scheduleUpdate;
 
+              const popperPlacement = placement ? placement.split('-')[0] : position;
+              const vertical = popperPlacement === 'top' || popperPlacement === 'bottom';
+
               return (
                 <div
                   ref={ref}
-                  className={styles.tooltipContainer}
+                  className={classNames(
+                    styles.tooltipContainer,
+                    vertical ? styles.verticalContainer : styles.horizontalContainer
+                  )}
                   style={style}
                   onMouseEnter={this.onMouseEnter}
                   onMouseLeave={this.onMouseLeave}
@@ -156,7 +186,7 @@ class Tooltip extends Component {
                     className={this.state.isOpen ? classNames(
                       styles.arrow,
                       styles[kind],
-                      styles[placement.split('-')[0]]
+                      styles[popperPlacement]
                     ) : styles.arrowDisabled}
                     ref={arrowProps.ref}
                     style={arrowProps.style}
@@ -201,7 +231,7 @@ Tooltip.defaultProps = {
   bodyClassName: styles.body,
   kind: kinds.DEFAULT,
   position: tooltipPositions.TOP,
-  canFlip: true
+  canFlip: false
 };
 
 export default Tooltip;

frontend/src/Movie/Details/MovieDetails.js

@@ -17,6 +17,7 @@ import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import Popover from 'Components/Tooltip/Popover';
+import Tooltip from 'Components/Tooltip/Tooltip';
 import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import InteractiveSearchFilterMenuConnector from 'InteractiveSearch/InteractiveSearchFilterMenuConnector';
@@ -461,15 +462,14 @@ class MovieDetails extends Component {
 
                     {
                       <span className={styles.links}>
-                        <Popover
+                        <Tooltip
                           anchor={
                             <Icon
                               name={icons.EXTERNAL_LINK}
                               size={20}
                             />
                           }
-                          title={translate('Links')}
-                          body={
+                          tooltip={
                             <MovieDetailsLinks
                               tmdbId={tmdbId}
                               imdbId={imdbId}
@@ -484,15 +484,14 @@ class MovieDetails extends Component {
                     {
                       !!tags.length &&
                         <span>
-                          <Popover
+                          <Tooltip
                             anchor={
                               <Icon
                                 name={icons.TAGS}
                                 size={20}
                               />
                             }
-                            title={translate('Tags')}
-                            body={
+                            tooltip={
                               <MovieTagsConnector movieId={id} />
                             }
                             position={tooltipPositions.BOTTOM}

frontend/src/Movie/Index/Table/MovieIndexRow.js

@@ -8,8 +8,8 @@ import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellCo
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import TagListConnector from 'Components/TagListConnector';
-import Popover from 'Components/Tooltip/Popover';
-import { icons } from 'Helpers/Props';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds } from 'Helpers/Props';
 import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
 import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
 import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
@@ -369,21 +369,22 @@ class MovieIndexRow extends Component {
                   className={styles[name]}
                 >
                   <span className={styles.externalLinks}>
-                    <Popover
+                    <Tooltip
                       anchor={
                         <Icon
                           name={icons.EXTERNAL_LINK}
                           size={12}
                         />
                       }
-                      title={translate('Links')}
-                      body={
+                      tooltip={
                         <MovieDetailsLinks
                           tmdbId={tmdbId}
                           imdbId={imdbId}
                           youTubeTrailerId={youTubeTrailerId}
                         />
                       }
+                      canFlip={true}
+                      kind={kinds.INVERSE}
                     />
                   </span>