Manually Triggering a Popover Relative to a Different Element

[samuelndm]

I am working on a feature where a popover should appear when a search yields results. However, I want the popover to display relative to the search container or input field, rather than the typical trigger element. Is there a way to manually trigger the popover and change its reference position to another element? In my scenario, I aim for the popover to show up once a search is complete, with its position anchored to the search container or input field. Any guidance or examples on how to accomplish this would be greatly appreciated!

[cmd-johnson]

I just encountered this myself. While the shadcn/ui Popover component doesn't export this functionality by default, the underlying @radix-ui/react-popover primitives do provide a PopoverAnchor component does exactly this.

In your shadcn/ui popover.tsx file, add an additional export:

export const PopoverAnchor = PopoverPrimitive.PopoverAnchor;

And now you can use the PopoverAnchor element to anchor the Popover to an element without using a PopoverTrigger:

<Popover open={Boolean(search)}>
  <PopoverAnchor>
    <Container>
      <SearchInput searchTerm={searchTerm} setSearchTerm={setSearchTerm} onSubmit={onSubmit} />
    </Container>
  </PopoverAnchor>

  <PopoverContent>
    <SearchResult search={search} isLoading={isLoading} isFetching={isFetching} />
  </PopoverContent>
</Popover>