Ensure hover modal is NOT cut off

src/components/App/SideBar/AiSummary/AiAnswer/__tests__/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { AiAnswer } from '../index'
+import { ExtractedEntity } from '~/types/index'
+
+describe('AiAnswer Component', () => {
+  const mockHandleLoaded = jest.fn()
+
+  const renderComponent = (answer, entities) => {
+    render(<AiAnswer answer={answer} entities={entities} handleLoaded={mockHandleLoaded} hasBeenRendered={false} />)
+  }
+
+  it('should display shows tooltip on hover over entity', async () => {
+    const entities: ExtractedEntity[] = [
+      {
+        entity: 'React',
+        description: 'A JavaScript library for building user interfaces.',
+      },
+    ]
+
+    renderComponent('Learn about React and its features.', entities)
+
+    await waitFor(() => expect(screen.getByText(/React/)).toBeInTheDocument())
+
+    const reactEntity = screen.getByText(
+      (content, element) => content.startsWith('React') && element.tagName === 'SPAN',
+    )
+
+    fireEvent.mouseOver(reactEntity)
+
+    const tooltip = await screen.findByText('A JavaScript library for building user interfaces.')
+
+    expect(tooltip).toBeVisible()
+  })
+})

src/components/App/SideBar/AiSummary/AiAnswer/index.tsx

@@ -35,7 +35,6 @@ export const AiAnswer = ({ answer, entities, handleLoaded, hasBeenRendered }: Pr
   const { setBudget } = useUserStore((s) => s)
   const [displayedText, setDisplayedText] = useState('')
   const [highlightedEntities, setHighlightedEntities] = useState<ExtractedEntity[] | undefined>(entities)
-  const [mousePosition, setMousePosition] = useState(0)
   const [isDescriptionComplete, setIsDescriptionComplete] = useState(true)
 
   useEffect(() => {
@@ -78,15 +77,13 @@ export const AiAnswer = ({ answer, entities, handleLoaded, hasBeenRendered }: Pr
     }
   }, [entities, highlightedEntities])
 
-  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+  const handleMouseMove = () => {
     setIsDescriptionComplete(false)
-    setMousePosition(event.clientX)
   }
 
   const responseTextDisplay = highlightAiSummary(
     displayedText,
     handleSubmit,
-    mousePosition,
     highlightedEntities,
     isDescriptionComplete,
   )

src/components/App/SideBar/AiSummary/utils/AiSummaryHighlight/index.tsx

@@ -1,5 +1,5 @@
+import Tooltip from '@mui/material/Tooltip'
 import styled, { keyframes } from 'styled-components'
-import { Tooltip } from '~/components/common/ToolTip'
 import { ExtractedEntity } from '~/types'
 import { colors } from '~/utils'
 
@@ -41,7 +41,6 @@ const Highlight = styled.span<{ animate: boolean }>`
 export function highlightAiSummary(
   sDescription: string,
   handleSubmit: (search: string) => void,
-  mousePosition: number,
   entities?: ExtractedEntity[],
   isDescriptionComplete?: boolean,
 ) {
@@ -59,16 +58,6 @@ export function highlightAiSummary(
 
   const parts = sDescription.split(regex)
 
-  let positionLeft: string
-
-  if (mousePosition <= 180) {
-    positionLeft = '145%'
-  } else if (mousePosition >= 250) {
-    positionLeft = '10%'
-  } else {
-    positionLeft = '50%'
-  }
-
   return (
     <>
       {parts.map((part, index) => {
@@ -78,7 +67,7 @@ export function highlightAiSummary(
           const uniqueKey = `${entity.entity}-${index}`
 
           return (
-            <StyledTooltip key={uniqueKey} content={entity.description} positionLeft={positionLeft}>
+            <StyledTooltip key={uniqueKey} title={entity.description}>
               <Highlight animate={!!isDescriptionComplete} onClick={() => handleSubmit(part)}>
                 {part}
               </Highlight>
@@ -96,23 +85,17 @@ function escapeRegExp(string: string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 }
 
-const StyledTooltip = styled(({ className, positionLeft, ...props }) => (
-  <Tooltip
-    {...props}
-    backgroundColor={colors.BG2}
-    borderRadius="6px"
-    className={className}
-    color="white"
-    fontSize="12px"
-    fontWeight="500"
-    minWidth="160px"
-    mrLeft={positionLeft}
-    padding="10px"
-    textAlign="start"
-    whiteSpace="normal"
-  />
-))`
-  & .tooltip-content {
+const StyledTooltip = styled((props) => <Tooltip classes={{ popper: props.className }} {...props} />)`
+  & .MuiTooltip-tooltip {
+    background-color: ${colors.BG4};
     color: white;
+    font-family: Barlow;
+    font-size: 14px;
+    font-weight: 500;
+    max-width: 180px;
+    padding: 10px;
+    transition: opacity 0.3s;
+    text-align: start;
+    white-space: normal;
   }
 `

src/components/common/ToolTip/index.tsx

@@ -14,7 +14,6 @@ interface TooltipProps {
   minWidth?: string
   whiteSpace?: string
   textAlign?: string
-  mrLeft?: string
 }
 
 const TooltipContainer = styled.div`
@@ -35,7 +34,6 @@ const TooltipText = styled.div<{
   minWidth?: string
   whiteSpace?: string
   textAlign?: string
-  mrLeft?: string
 }>`
   visibility: hidden;
   width: auto;
@@ -86,7 +84,6 @@ export const Tooltip = ({
   whiteSpace,
   position,
   textAlign,
-  mrLeft,
 }: TooltipProps) => (
   <TooltipContainer>
     {children}
@@ -98,7 +95,6 @@ export const Tooltip = ({
       fontWeight={fontWeight}
       margin={margin}
       minWidth={minWidth}
-      mrLeft={mrLeft}
       padding={padding}
       position={position}
       textAlign={textAlign}

src/utils/colors/index.tsx

@@ -74,6 +74,7 @@ export const colors = {
   BG2: 'rgba(22, 23, 29, 1)',
   BG2_ACTIVE_INPUT: 'rgba(16, 17, 22, 1)',
   BG3: 'rgba(28, 30, 38, 1)',
+  BG4: 'rgba(30, 30, 35, 0.9)',
   GRAY3: 'rgba(186, 193, 198, 1)',
   GRAY6: '#909BAA',
   GRAY7: 'rgba(107, 122, 141, 1)',