fix(ui): tooltip placement and content in sequential cd card

Author: Elessar1802

src/Shared/Components/ImageCard/SequentialCDCardTitle/DeploymentEnvState/DeploymentEnvState.tsx

@@ -14,29 +14,29 @@
  * limitations under the License.
  */
 
-import Tippy from '@tippyjs/react'
-import { ConditionalWrap } from '../../../../../Common'
+import { Tooltip } from '../../../../../Common'
 import { DeploymentEnvStateProps } from './types'
 import { getDeploymentEnvConfig } from './utils'
 
 const DeploymentEnvState = ({ envStateText, title, tooltipContent }: DeploymentEnvStateProps) => {
     const { Icon, stateClassName } = getDeploymentEnvConfig(envStateText)
-    const renderTooltip = (children) => (
-        <Tippy content={tooltipContent} className="default-tt" placement="top" arrow={false} interactive>
-            {children}
-        </Tippy>
-    )
 
     return (
-        <ConditionalWrap condition={!!tooltipContent} wrap={renderTooltip}>
+        <Tooltip
+            alwaysShowTippyOnHover={!!tooltipContent}
+            content={tooltipContent}
+            placement="right"
+            interactive
+            className="w-250 dc__resizable-textarea__with-max-height"
+        >
             <div className={`${stateClassName} br-4 cn-9 pt-3 pb-3 pl-6 pr-6 bw-1 mr-6`}>
                 <span className="fw-4 fs-11 lh-16 flex">
                     {Icon}
                     {envStateText}
                     <span className="fw-6 ml-4">{title}</span>
                 </span>
             </div>
-        </ConditionalWrap>
+        </Tooltip>
     )
 }
 

src/Shared/Components/ImageCard/SequentialCDCardTitle/DeploymentEnvState/types.tsx

@@ -19,7 +19,7 @@ import { ReactNode } from 'react'
 export interface DeploymentEnvStateProps {
     envStateText: string
     title: string
-    tooltipContent?: string
+    tooltipContent?: ReactNode
 }
 
 export interface GetDeploymentEnvConfigType {

src/Shared/Components/ImageCard/SequentialCDCardTitle/SequentialCDCardTitle.tsx

@@ -50,7 +50,13 @@ const SequentialCDCardTitle = ({
                 <DeploymentEnvState
                     envStateText={getDeployedStateText()}
                     title={deployedOnTitle}
-                    tooltipContent={deployedOn.join(',')}
+                    tooltipContent={
+                        <div className="flexbox-col lh-20">
+                            {deployedOn.map((env) => (
+                                <span>{env}</span>
+                            ))}
+                        </div>
+                    }
                 />
             )
         }