diff --git a/src/components/mindset/components/HoverCard/index.tsx b/src/components/mindset/components/HoverCard/index.tsx
new file mode 100644
index 000000000..7ff33d355
--- /dev/null
+++ b/src/components/mindset/components/HoverCard/index.tsx
@@ -0,0 +1,70 @@
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+import { Text } from '~/components/common/Text'
+import { colors } from '~/utils/colors'
+
+type Props = {
+ title?: string
+ description?: string
+}
+
+export const HoverCard = ({ title, description }: Props) => (
+
+
+
+ {title}
+ {description && {description}}
+
+
+
+)
+
+const Portal = styled.div`
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 1000;
+`
+
+const TooltipContainer = styled(Flex)`
+ width: 390px;
+ min-height: 100px;
+ background: ${colors.HOVER_CARD_BG};
+ border-radius: 8px;
+ padding: 15px;
+ padding-bottom: 3px !important;
+ position: fixed;
+ flex-direction: column;
+ gap: 4px;
+ top: calc(-230px);
+ left: 100%;
+ z-index: 1000;
+ margin-left: 450px;
+ pointer-events: auto;
+`
+
+const ContentWrapper = styled(Flex)`
+ margin-top: 0;
+ flex-direction: column;
+ gap: 4px;
+`
+
+const Title = styled(Text)`
+ font-family: Barlow;
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 24px;
+ color: ${colors.white};
+ margin: 0;
+`
+
+const Description = styled(Text)`
+ font-family: Barlow;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ color: ${colors.white};
+ margin: 0;
+ opacity: 0.8;
+`
diff --git a/src/components/mindset/components/Scene/Board/Node/index.tsx b/src/components/mindset/components/Scene/Board/Node/index.tsx
index 7392d8bfe..7a674e423 100644
--- a/src/components/mindset/components/Scene/Board/Node/index.tsx
+++ b/src/components/mindset/components/Scene/Board/Node/index.tsx
@@ -1,7 +1,8 @@
import { Html } from '@react-three/drei'
import { useThree } from '@react-three/fiber'
-import { memo } from 'react'
+import { memo, useState } from 'react'
import { Flex } from '~/components/common/Flex'
+import { HoverCard } from '../../../HoverCard'
import { RoundedRectangle } from '../RoundedRectangle'
import { Content } from './Content'
import { Image } from './Image'
@@ -15,10 +16,12 @@ type Props = {
name: string
type: string
color: string
+ description?: string
}
-export const Node = memo(({ width, height, position, url, onButtonClick, name, type, color }: Props) => {
+export const Node = memo(({ width, height, position, url, onButtonClick, name, type, color, description }: Props) => {
const { camera } = useThree()
+ const [isHovered, setIsHovered] = useState(false)
return (
@@ -27,27 +30,28 @@ export const Node = memo(({ width, height, position, url, onButtonClick, name, t
{false && }
{/* Html */}
- {true && (
-
- onButtonClick()}
- style={{
- fontSize: '12px',
- color: 'white',
- fontWeight: 600,
- width: `${width * camera.zoom}px`,
- height: `${height * camera.zoom}px`,
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- borderRadius: '8px',
- pointerEvents: 'auto', // Allow interaction with the HTML element
- }}
- >
-
-
-
- )}
+
+ onButtonClick()}
+ onMouseEnter={() => setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ style={{
+ fontSize: '12px',
+ color: 'white',
+ fontWeight: 600,
+ width: `${width * camera.zoom}px`,
+ height: `${height * camera.zoom}px`,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ borderRadius: '8px',
+ pointerEvents: 'auto',
+ }}
+ >
+
+ {isHovered && }
+
+
)
})
diff --git a/src/components/mindset/components/Scene/Board/index.tsx b/src/components/mindset/components/Scene/Board/index.tsx
index 6bf72c1e8..ad101490c 100644
--- a/src/components/mindset/components/Scene/Board/index.tsx
+++ b/src/components/mindset/components/Scene/Board/index.tsx
@@ -122,6 +122,7 @@ export const Board = () => {
{