フロートツールチップ

<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;
    }
`;