Designsystemet.Placement

Where a floating element sits next to the element it belongs to.

Popover, Dropdown and Tooltip each have a placement attribute that takes one of these:

Popover.view helpId [ Popover.placement Placement.Right ] [ Html.text "…" ]

designsystemet-web positions the element with Floating UI and flips it to the other side when there is no room, unless you turn that off.

Same as React's Placement: Floating UI's placements plus 'none'.

React → Elm

= Top

| TopStart

| TopEnd

| Right

| RightStart

| RightEnd

| Bottom

| BottomStart

| BottomEnd

| Left

| LeftStart

| LeftEnd

| None

A side, and optionally which end of that side to align to.

TopStart sits above the trigger with the start edges aligned (left edges in a left-to-right language). TopEnd aligns the end edges.

None turns off positioning, for when you do it in CSS.

The value written to data-placement, like "bottom-end".