Components Floating div
Petal Framework

Floating div

A div positioned by Floating UI on mount, attached to an element of your choosing. Renders as hidden before mounting to prevent flash of unstyled content issues.

How to access

See plans

This comes with the Petal Framework private hex package. Purchase a membership to get access to this package. It can be used with any Phoenix project. Post-expiration, you'll retain access but won't be eligible for updates from newer versions.

Here's an example of how you might use the floating div:

Attributes & Slots:

  attr :id, :string, required: true, doc: "The ID of the floating div container."

  attr :attach_to_id, :string, required: true, doc: "The ID of the element to attach to on mount with Floating UI."

  attr :class, :string, default: "", doc: "Classes to apply to the floating div, in addition to Floating UI required defaults (`hidden absolute w-max top-0 left-0`)"

  attr :placement, :string, default: "right-start", doc: "The position of the flyout relative to the element it's attached to. Defaults to `right-start`, see [Floating UI docs]( for available values."

  attr :show_on_mount, :boolean, default: false, doc: "Whether to show the floating div on mount. Defaults to false so it's hidden until triggered otherwise."

  attr :float_offset, :map, default: nil, doc: "A map of options to pass to Floating UI offset middleware client-side. For example: `%{"mainAxis" => 32}`. Defaults to `nil`. See [Floating UI Docs]("

  attr :rest, :global, doc: "Any additional HTML attributes to add to the floating container."

  slot :inner_block, required: true