How to "link" Popover to element on Canvas?

[AlexSKuznetsov]

Hey,

I'm using React Flow library for node-based canvas workflow management.
Currently one of the node has a button with Popover element. When i'm start moving Node Popover keep it's position without moving. How can a fix this?

popover.mp4

Code:

<Popover
        renderWithPortal
        triggerType="custom"
        header="Job info"
        content={
          <SpaceBetween size="s" direction="vertical">
            <Box
              variant="span"
              color="text-label"
              fontWeight="bold"
              fontSize="body-s"
            >
              {label}
            </Box>
            <Box variant="span" color="text-label">
              By default, the job will start automatically when the previous job
              is finished. You can change this behavior by unselecting toggle in
              the name.
            </Box>
          </SpaceBetween>
        }
      >
        <div className={style.infoButton}>
          <Button variant="icon" iconName="status-info" />
        </div>
      </Popover>

[jperals]

Hi Alexander,

The popover relies on scroll or resize events to update its position. I assume the canvas does not trigger such events while dragging, so the popover position will not update.

In other words, a popover in a canvas is not a use case supported by the component at the moment. You might have to implement your own component (if you do, our design tokens might help you maintain consistency with the system), or show the information somewhere else, e.g, in a side panel or a statically positioned overlay.

[AlexSKuznetsov]

Hi Joan, thanks for response.
Is it possible to add in future releases custom prop to manually trigger dragging event or at least to control open/close behaviour?