Parent overflow hidden 切掉 children (portal)

當 parent 有設定 overflow hidden 時如果 children 內容有包含 popover 或是 tooltip 等等 floating 內容時，我們可以把 children 移除 parent，然後用定位的方式放到想要的位置， Chakra UI 可以直接使用 Portal, 並且在 react 中 event bubbling 還是可以傳回 parent

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverBody,
  PopoverArrow,
  PopoverCloseButton,
  Button,
  Portal, // 關鍵：引入 Portal
  Box
} from '@chakra-ui/react'
 
function Example() {
  return (
    // 假設這是你那個有 overflow: hidden 的 wrapper
    <Box overflow="hidden" width="200px" height="100px" border="1px solid red">
      <Popover>
        <PopoverTrigger>
          <Button colorScheme="blue">打開 Popover</Button>
        </PopoverTrigger>
        
        {/* 使用 Portal 將內容傳送到 DOM 的最外層 */}
        <Portal>
          <PopoverContent>
            <PopoverArrow />
            <PopoverHeader>標題</PopoverHeader>
            <PopoverCloseButton />
            <PopoverBody>
              這裡的內容即便超出紅框範圍，
              也不會因為 overflow: hidden 而被切掉！
            </PopoverBody>
          </PopoverContent>
        </Portal>
      </Popover>
    </Box>
  )
}