Wishlist Dizzy

Floating UI

Shared positioning options for Dizzy’s floating components.

Overview

Dizzy uses Floating UI to anchor Tooltip, Popover, Dropdown, and Date Picker content to their triggers. Their hooks share one positioning implementation, so the same options behave consistently across all four components.

Floating UI calculates coordinates and keeps them current while the page scrolls, resizes, or changes layout. Each component remains responsible for its own semantics and interaction behavior.

Shared positioning API

These attributes are available on Tooltip, Popover, Dropdown, and Date Picker.

HEEx 
<Popover.popover
  id="project-details"
  label="Project details"
  side={:bottom_start}
  offset={8}
  strategy={:fixed}
  placement_strategy={:flip}
  shift
  arrow={false}
  hide={false}
>
  <:trigger>...</:trigger>
  <:content>...</:content>
</Popover.popover>
Shared Floating UI component attributes
Attribute Values Behavior
side 12 side and alignment atoms Sets the preferred placement relative to the trigger.
offset Integer, default 8 Sets the distance in pixels between the trigger and floating content.
strategy :fixed or :absolute Selects the matching CSS positioning strategy.
placement_strategy nil, :flip, or :auto_placement Controls whether and how another placement is selected when space is limited.
shift Boolean, default true Moves content along its alignment axis to keep it inside its clipping boundary.
arrow Boolean, default false Renders and positions an arrow toward the trigger.
hide Boolean, default false Hides floating content when its trigger is clipped and no longer appears attached.

Placement

The side attribute maps to Floating UI’s placement option. Choose a side alone to center the floating content on that edge, or add _start or _end for logical alignment that follows the document’s writing direction.

Components choose defaults suited to their purpose: Tooltip uses :top, Popover uses :bottom, Dropdown uses :bottom_end, and Date Picker uses :bottom_start.

side values 
:top | :top_start | :top_end
:bottom | :bottom_start | :bottom_end
:left | :left_start | :left_end
:right | :right_start | :right_end

Distance and positioning strategy

offset uses Floating UI’s offset middleware to add space between the trigger and floating content. Dizzy accepts a single pixel distance and defaults to 8.

strategy=fixed positions relative to the viewport in most layouts and can escape some clipping ancestors. strategy=absolute positions relative to the nearest positioned ancestor. The rendered Tailwind positioning class and Floating UI calculation always use the same strategy.

Collision handling

placement_strategy=flip starts from side and uses Floating UI’s flip middleware to try fallback placements when the preferred side overflows. This is the default.

placement_strategy=auto_placement uses auto placement to choose the placement with the most available space. Set placement_strategy= to keep the requested side even when it overflows.

shift is independent of that choice. Floating UI’s shift middleware keeps the resolved side while moving the content along its alignment axis to remain visible.

Arrow and reference hiding

Set arrow to render a component-styled arrow. The shared positioning layer uses Floating UI’s arrow middleware to keep it pointed toward the trigger after flipping or shifting.

Set hide when floating content should disappear once its trigger has been clipped by a scrolling container or viewport boundary. Dizzy uses Floating UI’s hide middleware and applies the result without removing the component from the DOM.

Explore Dizzy