[MUI] 닫기버튼 있는 Tooltip 만들기(Popper)

MUI의 Tooltip은 hover시에만 유지되고 요구사항에 맞지않는 점이 있어서 popper로 변경해보기로 하였다.

 

내가 원하는 모습 : 클릭으로  toggle하고, 유지되었다가 닫기 상호작용이 가능한 tooltip

---

1. import

import Popper from "@mui/material/Popper";
import CloseIcon from "@mui/icons-material/Close";

 

2. 사용하기

const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const tooltipOpen = Boolean(anchorEl);
...
<div onClick={(e) => setAnchorEl(anchorEl ? null : e.currentTarget)}>
	<Popper open={tooltipOpen} anchorEl={anchorEl} sx={{ zIndex: "1500", position: "absolute" }} placement="bottom-start">
		<div className="flex flex-row text-xs w-[200px] bg-white rounded-md shadow-md p-2 border border-solid mt-2">
			<div className="flex items-center justify-center p-1">{코멘트코멘트코멘트}</div>
				<div className="flex pl-2 text-gray-500 cursor-pointer hover:text-gray-700" onClick={() => setAnchorEl(null)}>
				<CloseIcon fontSize="small"/>
			</div>
		</div>
	</Popper>
</div>

 

주의할점은 popper가 나타날 주체인 아이콘이던 div던에 anchorEl을 걸어줘야 작동합니다.

 

저는 zIndex가 높은 div에서 작업했기때문에 별도로 z index를 보다 높게 지정했습니다.