마우스를 가져다대면 설명 보여주는 기능

Node.js Deep Dive를 작성하던 중, 이런 기능이 있으면 좋겠다는 생각을 했다.

하이라이트된 단어에 마우스를 가져다대면, 내가 작성한 설명 주석을 보여주는 것이다.

1. 스팩 정의

기능 스팩

1. 해당 부분이 하이라이팅이 되어 사용자에게 ‘이거 마우스 가져다대면 무언가 보여주겠다’는 생각이 들게 한다.
2. 마우스를 가져다대면, 마우스 위로 설명이 보인다.

개발 스팩

1. MDX파일에서, 설명을 추가하고 싶은 부분에 <Description content="구글에서 개발한 오픈소스로 ..">V8 엔진</Description>라 작성한다.

2. 개발

개발 구상

1. showToolTip을 상태값으로 관리한다.
   • true라면 tooltip을 보여주고, false라면 보여주지 않는다.
2. onMouseEnter과 onMouseLeave 이벤트 함수를 이용한다.
   • onMouseEnter시, showToolTip를 true로 변경한다.

이후 개발

1. ToolTip컴포넌트를 따로 분리하기
   • <ToolTip content=””>content</ToolTip>

1. Description

// components/mdx/Description.tsx
export default function Description({
  content,
  children,
}: PropsWithChildren<DescriptionProps>) {
  return (
    <ToolTip content={content}>
      <span className="bg-yellow-50 px-8 py-4">{children}</span>
    </ToolTip>
  );
}

2. ToolTip

// components/ToolTip.tsx
export default function ToolTip({
  content,
  children,
}: PropsWithChildren<ToolTipProps>) {
  const [isShowToolTip, setIsShowToolTip] = useState(false);

  return (
    <span
      onMouseEnter={() => setIsShowToolTip(true)}
      onMouseLeave={() => setIsShowToolTip(false)}
      className="relative"
    >
      {isShowToolTip && (
        <span className="rounded-16 text-caption absolute -top-32 left-8 w-max bg-slate-50 px-8 py-4 text-black">
          {content}
        </span>
      )}
      {children}
    </span>
  );
}