Popover

<Stack alignItems='center' justifyContent='center' className='p-4' style={{ height: '200px' }}>
    <Popover
        trigger={<Button inactive>Element</Button>}
        open
        direction="r"
        header="Popover Header"
        width="xs"
        padding="s"
    >
        <BodyText size="small">Popover content.</BodyText>
    </Popover>
</Stack>

<State>
    {([open, setOpen]) => (
        <>
        <ButtonGroup>
            {[['xs', 'Extra Small'], ['s', 'Small'], ['m', 'Medium'], ['l', 'Large']].map((item, index) => (
                <Popover
                    key={index}
                    portal
                    trigger={<Button onClick={() => setOpen(open !== index ? index : null)}>{item[1]}</Button>}
                    open={open === index}
                    direction="t"
                    width={item[0]}
                >
                    <BodyText size="small">{`${item[1]} Popover.`}</BodyText>
                    <BodyText size="small">Second line of text.</BodyText>
                </Popover>
            ))}
        </ButtonGroup>
        <br />
        <Popover
            portal
            trigger={
                <Card onClick={() => setOpen(open !== 4 ? 4 : null)}>
                    Match the width of the wrapped element (click to open)
                </Card>
            }
            open={open === 4}
            direction="b"
            width="100"
        >
            <BodyText size="small">Full-width Popover.</BodyText>
            <BodyText size="small">Second line of text.</BodyText>
        </Popover>
        </>
    )}
</State>