React-Tooltip 개선

Before

Tooltip으로 감싸준 컴포넌트를 마우스 오버시 자식노드가 생성되어 툴팁이 나타나는 구조.

CSS로 제어를 하고 있었음.

<Tooltip text="검색" direction="right">
  <div>hover</div>
</Tooltip>


interface TooltipProps {
  children: React.ReactNode
  text: string
  direction?: 'top' | 'bottom' | 'left' | 'right'
}

const Tooltip = ({ children, text, direction = 'top' }: TooltipProps) => {
  return (
    <Styles.Tooltip
      ref={containerRef}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
      <Styles.Content>{text}</Styles.Content>
    </Styles.Tooltip>
  )
}

export default Tooltip

export const Tooltip = styled.div`
  postion: relative;
`

export const Content = styled.span`
  postion: absolute;
`

After

라이브러리를 사용하려하였지만 4가지 방향외에 특별한 기능이 필요하지 않아 라이브러리는 사용하지 않고 참고만하였음.

 

Portal을 사용하여 DOM 계층에서 분리하여 다른 부분의 레이아웃 및 스타일에 영향 미치지 않고 독립적으로 관리할 수 있게 별도 컨테이너에 렌더링 

• 이벤트 처리 용이 - 다른 부분에 이벤트 영향이 미치지 않는다.
• 애니메이션, 트렌지션을 독립적으로 처리할 수 있어 적용하기 용이
• 독자적으로 레이아웃을 가져, css 충돌 방지 - 일관된 디자인 구현. 

interface TooltipProps {
  children: React.ReactNode
  text: string
  direction?: 'top' | 'bottom' | 'left' | 'right'
}

const Tooltip = ({ children, text, direction = 'top' }: TooltipProps) => {
  const element = document.getElementById('tooltip') as HTMLElement
  const containerRef = useRef<HTMLDivElement>(null)
  const tooltipRef = useRef<HTMLDivElement>(null)
  const [isShow, setIsShow] = React.useState(false)

  const handleMouseEnter = () => {
    setIsShow(true)
  }
  const handleMouseLeave = () => {
    setIsShow(false)
  }

  const renderTooltip = () => {
    if (!isShow) return null
    const width = getContentWidth(text)
    const position = getTooltipDirection(containerRef.current, width, direction)

    const tooltipElement = (
      <Styles.Tooltip
        className="tooltip"
        ref={tooltipRef}
        $left={position.left}
        $top={position.top}
      >
        {text}
      </Styles.Tooltip>
    )

    return createPortal(React.cloneElement(tooltipElement), element)
  }

  return (
    <div
      ref={containerRef}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
      {renderTooltip()}
    </div>
  )
}

export default Tooltip

 

참고 라이브러리 

https://www.npmjs.com/package/react-tooltip

https://github.com/CharlesStover/react-mui-tooltip/blob/master/src/react-mui-tooltip.js