React에서 Tooltip 만들기

Tooltip.js

import React, { useState } from 'react';
import styled from 'styled-components';

function Tooltip({ children, text }) {
  const [show, setShow] = useState(false);

  return (
    <StyledWrap>
      <StyledBlock
        onMouseEnter={() => setShow(true)}
        onMouseLeave={() => setShow(false)}
      >
        {children}
      </StyledBlock>
      <StyledTooltip isShow={show}>{text}</StyledTooltip>
    </StyledWrap>
  );
}

export default Tooltip;

const StyledWrap = styled.div`
    position: relative;
`;

const StyledTooltip = styled.span`
    display: flex;
    align-items: center;
    width: max-content;
    visibility: ${({ isShow }) => (isShow ? 'visible' : 'hidden')};
    background: rgb(235, 236, 239);
    position: absolute;
    padding: 0 12px;
    font-size: 14px;
    border-radius: 5px;
    left: 55px;
    top: 0;
    bottom: 0;
    &:before {
        display: block;
        position: absolute;
        content: "";
        left: -18px;
        border-top: 8px solid transparent;
        border-right: 12px solid rgb(235, 236, 239);
        border-bottom: 8px solid transparent;
        border-left: 8px solid transparent;
    }
`;

const StyledBlock = styled.div`
    width: max-content;
`;

 

App.js

import React from 'react';
import styled from 'styled-components';
import Tooltip from './Tooltip';

export default function App() {
  return (
    <StyledWrapper>
      <StyledBlock>
        <Tooltip text="확대하기 +">
          <StyledButton>
            <svg
              width="24"
              height="24"
              fill="rgba(26,26,26,0.8)"
              fillOpacity="1"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 96 96"
            >
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M45 18c-14.912 0-27 12.088-27 27s12.088 27 27 27 27-12.088 27-27-12.088-27-27-27ZM12 45c0-18.225 14.775-33 33-33s33 14.775 33 33c0 8.032-2.87 15.395-7.64 21.117L83.12 78.88a3 3 0 1 1-4.242 4.242L66.117 70.36A32.866 32.866 0 0 1 45 78c-18.225 0-33-14.775-33-33Zm33-17a3 3 0 0 1 3 3v12h12a3 3 0 1 1 0 6H48v12a3 3 0 1 1-6 0V49H30a3 3 0 1 1 0-6h12V31a3 3 0 0 1 3-3Z"
              ></path>
            </svg>
          </StyledButton>
        </Tooltip>
      </StyledBlock>
      <StyledBlock>
        <Tooltip text="축소하기 -">
          <StyledButton>
            <svg
              width="24"
              height="24"
              fill="rgba(26,26,26,0.8)"
              fillOpacity="1"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 96 96"
            >
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M45 18c-14.912 0-27 12.088-27 27s12.088 27 27 27 27-12.088 27-27-12.088-27-27-27ZM12 45c0-18.225 14.775-33 33-33s33 14.775 33 33c0 8.032-2.87 15.395-7.64 21.117L83.12 78.88a3 3 0 1 1-4.242 4.242L66.117 70.36A32.866 32.866 0 0 1 45 78c-18.225 0-33-14.775-33-33Zm14 1a3 3 0 0 1 3-3h32a3 3 0 1 1 0 6H29a3 3 0 0 1-3-3Z"
              ></path>
            </svg>
          </StyledButton>
        </Tooltip>
      </StyledBlock>
    </StyledWrapper>
  );
}

const StyledButton = styled.button`
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 4px;
`;

const StyledWrapper = styled.div`
    display: flex;
    flex-direction: column;
`;

const StyledBlock = styled.div`
    margin: 10px;
`;

 

https://stackblitz.com/edit/react-tvv9mg?file=src/App.js