툴팁 띄우기

일단 position relative와 absolute 에 대한 이해가 필요하다.
이는 간단하다 부모의 태그에 position: relative 속성을 주고,
자식 태그에서 position: absolute 를 주면
부모 태그의 position: relative 를 기준으로
top, bottom, left, right 를 설정할 수 있다.

<LocationInfo>
  <LocationOnOutlinedIcon className="yellowIcon" />
  <LocationToolTip>
    <span>
      {data ? data.fetchBoard.boardAddress.address : "loading..."}
    </span>
    <span>
      {data
        ? data.fetchBoard.boardAddress.addressDetail
      : "loading..."}
    </span>
    <span></span>
  </LocationToolTip>
</LocationInfo>

<span>
      <span>마우스 Hover</span>
      <span>툴팁</span>
</span>
위와 같은 구조에서
<span>툴팁</span>에 display:none 속성을 준 후
최상단의 span 태그에 hover했을 시
자식태그의 <span>툴팁</span>을 display: none 속성을 해제해 주면된다.

/** @jsxImportSource @emotion/react */
import { jsx } from "@emotion/react";
import styled from "@emotion/styled";
// 생략
export const LocationToolTip = styled(FlexColumn.withComponent("span"))`
    display: none;
    justify-content: flex-start;
    align-items: flex-end;
    position: absolute;
	// 생략
    top: 0px;
    margin-top: -90%;
    & > span {
        width: max-content;
    }
    & > span:last-of-type {
        position: absolute;
        display: block;
        width: 0px;
        height: 0px;
        right: 0;
        bottom: -8px;
        border-left: 12px solid #000000;
        border-top: 8px solid transparent;
        transform: rotate(180deg);
    }
`;
export const LocationInfo = styled.span`
    &:hover > ${LocationToolTip} {
        display: flex;
    }
`;

position: absolute를 주니 span태그의 내용들이 찌부러졌다😱...
그래서 span에 width: max-content 속성을 주어 글자의 길이만큼 부모의 태그의 크기가 늘어나도록 하였다.
css속성은 없는게 없는것 같다.
후.. 직각삼각형을 굳이 css로 그리려는 고집때문에 많은 시간을 허비했다.
하지만 결국 해냈다😂