Implement tooltip on remaining paces

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Icon, Thumbnail } from '@ohif/ui';
+import { Icon, Thumbnail, Tooltip } from '@ohif/ui';
 
 const ThumbnailTracked = ({
   className,
@@ -29,51 +29,37 @@ const ThumbnailTracked = ({
         <div
           className={classnames(
             'flex flex-col items-center justify-start p-2 mb-2 relative cursor-pointer',
-            isTracked && 'rounded-sm hover:bg-gray-900 showTooltipOnHover'
+            isTracked && 'rounded-sm hover:bg-gray-900'
           )}
         >
-          <Icon name={trackedIcon} className="text-primary-light mb-2 w-4" />
-          <div className="text-white text-xl leading-tight h-5">
-            {viewportIdentificator}
-          </div>
-          <div
-            className={classnames(
-              'tooltip tooltip-right bg-black border border-secondary-main text-common-light text-base rounded py-2 px-4 top-0 w-max-content hidden'
-            )}
-          >
-            <div className="flex flex-row flex-1">
-              <div className="flex flex-col flex-1 pr-4">
-                <span>
-                  Series is <span className="text-white">tracked</span>
-                </span>
-                {viewportIdentificator && (
+          <Tooltip
+            position="right"
+            content={
+              <div className="flex flex-row flex-1">
+                <div className="flex flex-col flex-1 pr-4">
                   <span>
-                    in viewport
-                    <span className="ml-1 text-white">
-                      {viewportIdentificator}
-                    </span>
+                    Series is <span className="text-white">tracked</span>
                   </span>
-                )}
-              </div>
-              <div className="flex flex-2 items-center justify-center">
-                <Icon name="info-link" className="text-primary-active" />
+                  {viewportIdentificator && (
+                    <span>
+                      in viewport
+                      <span className="ml-1 text-white">
+                        {viewportIdentificator}
+                      </span>
+                    </span>
+                  )}
+                </div>
+                <div className="flex flex-2 items-center justify-center">
+                  <Icon name="info-link" className="text-primary-active" />
+                </div>
               </div>
+            }
+          >
+            <Icon name={trackedIcon} className="text-primary-light mb-2 w-4" />
+            <div className="text-white text-xl leading-tight h-5">
+              {viewportIdentificator}
             </div>
-            <svg
-              className="absolute text-black stroke-secondary-main stroke-2"
-              style={{
-                top: 'calc(50% - 8px)',
-                left: -15,
-                transform: 'rotate(270deg)',
-              }}
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-            >
-              <path fill="currentColor" d="M24 22h-24l12-20z" />
-            </svg>
-          </div>
+          </Tooltip>
         </div>
         {isTracked && (
           <Icon