Fixed: Tooltip jumping around

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

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>