useTooltip으로 재사용되는 tooltip 만들기

사이드 프로젝트에서 tooltip에 대해 알게 되었다.

뭐인지 알고 있기는 했지만 실제로 구현해본 적이 없기도 하고 css로만 구현하는 것 같아서 뭔가 헷갈리기도 했다.

아무튼 나는 나중으로 미루고(?) 있었는데 메인 페이지 UI 구현하면서 실제로 구현해봤다.

물론 다른 프론트엔드 개발자 분이 구현하신 tooltip 파일을 보고 만든 것이다.

 

그런데 여러 페이지마다 쓰이고 있어서 모든 폴더마다 새로 만들게 아니라 custom hook으로 만들어 쓰는게 더 효율적일 것 같아서 다른 분의 코드를 토대로 구현했다.

 

 

 

 

 

 

 

 

 

 

tooltip이란?

 

해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과를 툴팁(tooltip) 효과라고 한다.

 

 

 

 

 

 

 

useTooltip 코드

 

tooltip에는 꼭 생각해야 할 부분들이 있다.

마우스를 올리면 추가 정보가 나오는 것이기 때문에 hover가 되는지 여부를 useState를 통해 상태 관리 해야 한다.

 

그리고 어떤 이미지나 콘텐츠를 hover했을 때 추가 정보가 나오는지도 정해야 한다.

내가 참여하는 프로젝트는 디자이너 분이 전부 아이콘을 만들어주셨기 때문에 그걸 사용했다.

 

 

import { useState } from "react";
import styled from "styled-components";
import help from "../assets/help.png";

const useToolTip = (defaultDescription) => {
  const [hover, setHover] = useState(false);

  const handleMouseEnter = () => {
    setHover(true);
  };

  const handleMouseLeave = () => {
    setHover(false);
  };

  const TooltipComponent = ({ description }) => (
    <TooltipContainer
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <HelpImg src={help} alt="help" />
      <Description className={hover ? "description visible" : "description"}>
        {description}
      </Description>
    </TooltipContainer>
  );

  return TooltipComponent;
};

const TooltipContainer = styled.div`
  position: relative;
  display: inline-block;
  padding: 4px 7px 3px;

  &:hover .description {
    display: block;
  }
`;

const HelpImg = styled.img`
  display: block;
`;

const Description = styled.div`
  display: none;
  position: absolute;
  background-color: #3f424e;
  color: #fff;
  font-family: Inter;
  font-size: 10px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.7;
  letter-spacing: normal;
  text-align: left;
  margin-bottom: 15px;
  padding: 3px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
`;

export default useToolTip;

 

위가 구현한 코드이다. 사실 코드만 조금 수정했을 뿐, 다른 분의 코드를 거의 본떠온 것이나 다름 없다.

tooltip이 어디에 구현되는지도 체크해야 하기 때문에 아이콘 아래에 추가 정보가 보이도록 스타일을 만들었다.

 

아까 말한 hover 여부 역시 useState로 관리하고. 

 

위의 코드를 보면 onMouseEnter과 onMouseLeave가 나오는데 이는 반대되는 개념이라고 할 수 있다.

 

onMouseEnter

• 마우스 포인터가 요소 안으로 들어올 때(자식 포함) 발생하는 이벤트
• 요소 밖으로 나갔다 오지 않으면 계속 발생하지 않음

onMouseLeave

• onmouseout 의 반대 개념
• 마우스 포인터가 요소 안으로 들어올 때 + 자식 요소 출입시 발생하는 이벤트
• 요소 영역을 벗어나지 않아도 자식 요소에 들어가거나 나올 때 발생함

 

이런 이벤트는 이번에 tooltip 관련해서 찾아보면서 처음 알게 되었다. 배우는 게 많다.

 

 

 

 

 

 

 

실제 적용한 모습

 

 

이런 식으로 저 물음표 아이콘에 마우스를 가져다 대면 부가 정보가 나오는 걸 알 수 있다.

이번에 처음 적용해봤는데, 앞으로도 잘 적용할 수 있을 것 같다!