툴팁 띄우기
일단 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로 그리려는 고집때문에 많은 시간을 허비했다.
하지만 결국 해냈다😂
Author And Source
이 문제에 관하여(툴팁 띄우기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kingmo/툴팁-띄우기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)