Tooltip 구현

Tooltip은 커서를 특정 구성 요소에 hover 되면 해당 영역에 대한 정보를 표시하는 GUI 요소이다.

화면에 새로운 기능이나 특정 요소에 대한 안내가 필요한 경우 화면을 Dimmed 처리하고 도움말이나 정보를 표시할 수 있다.

 

사용자 상호작용에 의한 팝업 종류는 다음 글에 있다. -> Toast 적용기

 

나온 디자인에 다음과 같은 툴팁 UI가 있었고, 이렇게 툴팁 컴포넌트를 구현했다.

 

import React from 'react'

interface TooltipProps {
  children: React.ReactNode
}

export default function Tooltip({ children }: TooltipProps) {
  return (
    <div className='group relative flex items-center justify-center mt-[40px] w-full h-fit flex-col gap-2'>
      <div className='absolute top-[-60px] hidden group-hover:flex flex-col items-center gap-4  max-w-[300px] '>
        <div className='bg-black rounded-full py-3 px-[20px] h-[40px] relative flex items-center '>
          <p className='line-height: 1.5rem text-[12px] text-white leading-none'>
            👍 친구에게 감정 이모지를 보낼 수 있어요!
          </p>
          <div className='absolute w-3 h-3 bg-black transform rotate-45 left-1/2 -translate-x-1/2 -bottom-1.5'></div>
        </div>
      </div>
      {children}
    </div>
  )
}

 

https://youtu.be/tmqzVrh4zcg