Allow Popover to float on top, rather than forced to a side.

[msonnemans]

Describe the feature in detail (code, mocks, or screenshots encouraged)

Inspired by the input fields of a table in Notion, I want to be able to click on an element and then float an Input/Textarea on top of it.

Using the Popover element (through shadcn Svelte) I am able to achieve this by deliberately giving a wrong value to the size property.

<Popover.Content side="wrong" sameWidth={true} overlap={true} class="p-0">
  <Textarea bind:value={$form.name} class="p-0 no-scrollbar"/>
</Popover.Content>

Note: side="wrong" of course makes TS complain. However, it actually achieves the effect that I want in the browser! 🎉

Popover trigger:

Popover clicked:

I propose this 'bug' is turned into a feature. The side property should accept a value that makes it legal to place popovers on top of the triggered element.

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

[huntabyte]

I'll need to dig into the https://floating-ui.com/ docs to see what the best way to handle this is.

[msonnemans]

Without having tested it, I believe that the result of the compute position function can be ignored and the absolute coordinates of the reference element should be used. https://floating-ui.com/docs/computeposition

Edit: by filling in a wrong input for side, I'm hitting this default which confirms my suspicion https://github.com/floating-ui/floating-ui/blob/f74524d9a980f919eeddb88cc221492040180cc6/packages/core/src/computeCoordsFromPlacement.ts#L40

[huntabyte]

Closing as fixed in bits-ui@next via Popover.ContentStatic