components
Popover

Popover

import { Popover, PopoverTrigger, PopoverContent } from "@arkitektbedriftene/fe-lib/ui"

Click

const [open, setOpen] = useState(false)
 
<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger>
    <Button>Click me</Button>
  </PopoverTrigger>
  <PopoverContent>
    <Box css={{ padding: '50px' }}>
      Content
    </Box>
  </PopoverContent>
</Popover>

Hover

const [open, setOpen] = useState(false)
 
<Popover
  trigger="hover"
  open={open}
  onOpenChange={setOpen}
  hoverDelay={{ open: 400, close: 0 }}
  placement="right"
  offset={{ mainAxis: 8 }}
>
  <PopoverTrigger>
    <Button>Trigger me</Button>
  </PopoverTrigger>
  <PopoverContent>
    <Box css={{ padding: '50px' }}>
      Content
    </Box>
  </PopoverContent>
</Popover>