Popover

A popover draws its trigger, and while open is true it also draws a panel that floats over the page in a window of its own. The panel is positioned from the trigger. It takes no room in the layout, it can sit above or to the left of the trigger, and no parent box or scroll view can clip it.

The trigger is child 0 of an :anchored node and the panel is child 1, in that order for every side. Positioning follows the web positionPopup():

• side picks the side of the trigger that the panel takes, and side_offset is the gap in dp.
• align places the panel across that side, against the trigger's own box, and align_offset nudges it along the same axis. A positive align_offset pushes inward on :end.
• The side flips to the opposite one when the requested side has no room and the opposite side does.
• The panel is then clamped into the window, with 8 dp of edge padding plus the safe-area inset, so it cannot run off the screen or land under the status bar.

align defaults to :start, where the web default is center, because the leading edge is where a native dropdown opens. Both the trigger and the panel hug their content, so :center and :end move the panel against the trigger.

Open and closed belong to your screen

The panel's window never closes itself. Keep an open? value in the screen's assigns and pass it as open. The popover reports what it wants next through on_open_change, as {:tap, {tag, next_open?}}, and your screen stores that value. A tap on the trigger toggles the panel. The trigger looks pressed while the panel is open.

A long press is the touch version of hover. With open_on_hold, a long press on the trigger also opens the panel, and the ordinary tap still toggles it. delay and close_delay are hover timings, so Mob drops them.

On Android, a tap outside the panel also reports the panel closed. Set dismissible to false for a popover that the user must answer.

Slots

Every part the web declares as a slot is a tag here: <MishkaPopoverTrigger>, <MishkaPopoverTitle>, <MishkaPopoverDescription>, <MishkaPopoverClose> and <MishkaPopoverArrow>. Bare children are the panel body. Write text="..." and the component styles the part, exactly as the shorthand prop does. Write markup inside the tag and it is yours, wrapped in a column that carries the part's test tag. The order you write the tags in does not matter, because each part goes where the anatomy says. A slot wins over its shorthand prop.

With no trigger at all, the popover is the panel alone, and it renders in place because there is nothing to anchor to. The Menu and Preview card components build on the popover's panel.

With an id, each part gets a test tag: <id>-trigger-open or <id>-trigger-closed, <id>-panel, <id>-title, <id>-desc, <id>-close and <id>-arrow.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob popover

The generator registers the <Popover> tag so you can use it in ~MOB markup. It also copies the shared Anchored and Event support modules. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaPopover>. Without a prefix the tag is <Popover>.

This popover uses every part: a trigger that looks pressed while the panel is open, a title, a description, a beak that points back at the trigger, a close action and a body. Each part is a slot tag, like Chelekom's <:trigger> and <:title>. The trigger sends the state it wants next, so one handle_info/2 clause serves the trigger, a long press and the close button.

Popover opened by tapping its trigger

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. A trigger toggles a panel of content below it.

# Every part is a SLOT TAG, like Chelekom's <:trigger>, <:title> and the
# rest. Order does not matter — each is placed where the anatomy says.
<MishkaPopover id="details" open={@open?} on_open_change={:details}>
  <MishkaPopoverTrigger text="Order details" />
  <MishkaPopoverTitle text="Shipped 2 days ago" />
  <MishkaPopoverDescription text="Tracking arrives by email." />
  <MishkaPopoverArrow />
  <MishkaPopoverClose text="Got it" />
  {content}
</MishkaPopover>

# The trigger sends the state it wants, so one clause serves the
# trigger, the long press and the footer's close button alike.
def handle_info({:tap, {:details, open?}}, socket) do
  {:noreply, Mob.Socket.assign(socket, :open?, open?)}
end

open_on_hold is the port of the web open_on_hover. A long press is what a touch screen has instead of a pointer resting on something. The tap still toggles the panel. A hold always sends true, and a tap sends the opposite of the current state.

Popover opened by press and hold

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a long press. A long press opens it, and a tap still toggles.

<MishkaPopover id="hint" open={@open?} open_on_hold={true} on_open_change={:hint}>
  <MishkaPopoverTrigger text="Press and hold me" />
  {content}
</MishkaPopover>

# A hold always sends true; only the tap sends the opposite of now.
def handle_info({:tap, {:hint, open?}}, socket) do
  {:noreply, Mob.Socket.assign(socket, :open?, open?)}
end

side picks the side of the trigger that the panel takes: :top, :right, :bottom or :left. side_offset is the gap in dp. The panel flips to the opposite side when the requested side has no room.

Popover side and gap

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. The side prop puts the panel before or after its trigger.

<MishkaPopover id="up" open={@up?} side={:top} side_offset={12} on_open_change={:up}>
  <MishkaPopoverTrigger text="Above" />
  {content}
</MishkaPopover>

<MishkaPopover id="next" open={@next?} side={:right} on_open_change={:next}>
  <MishkaPopoverTrigger text="Beside" />
  {content}
</MishkaPopover>

def handle_info({:tap, {:up, open?}}, socket) do
  {:noreply, Mob.Socket.assign(socket, :up?, open?)}
end

width fixes the panel at 220 dp. align={:end} places the panel against the end of the trigger, and align_offset nudges it along the same axis. A positive align_offset pushes inward on :end.

Popover width and alignment

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. The align prop places a narrow panel along the trigger.

<MishkaPopover
  id="menu"
  open={@open?}
  width={220}
  align={:end}
  align_offset={-4}
  on_open_change={:menu}
>
  <MishkaPopoverTrigger text="Trailing edge" />
  {content}
</MishkaPopover>

def handle_info({:tap, {:menu, open?}}, socket) do
  {:noreply, Mob.Socket.assign(socket, :open?, open?)}
end

disabled wires no handler at all, so the trigger is inert. chevron={false} removes the ▾ indicator from the trigger.

Disabled popover without a chevron

LTR RTL

Preview

Show the whole example Show less

<MishkaPopover
  id="off"
  open={@open?}
  disabled={true}
  chevron={false}
  on_open_change={:off}
>
  <MishkaPopoverTrigger text="Unavailable" />
  {content}
</MishkaPopover>

background, color, muted_color, corner_radius, padding and the border props style the panel. Set the ink whenever you set the fill, or the title keeps the default :on_surface color. This popover has no trigger and open={true}, so the panel renders in place.

Custom popover colors, corners and border

LTR RTL

Preview

Show the whole example Show less

<MishkaPopover
  open={true}
  background={0xFF1E1B4B}
  color={0xFFFFFFFF}
  muted_color={0xFFC7D2FE}
  border_width={0}
  corner_radius={:radius_lg}
>
  <MishkaPopoverTitle text="Any colour works" />
</MishkaPopover>

A slot tag and its function build the identical node. When the parts come from a list, use the function: a comprehension can return trigger/1, and there is no way to produce a tag from one. Slot nodes are ordinary nodes, so they travel in the same list as the body and land where the tags would.

Popover parts built from data

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. Triggers and panel parts can be built from a list.

alias MishkaMob.Components.MishkaPopover

rows = Enum.map(@parcels, &line/1)

# Slot nodes are ordinary nodes, so they travel in the same list as the
# body and land in the same places the tags would.
<MishkaPopover id="order" open={@open?} on_open_change={:order}>
  {[
    MishkaPopover.trigger("#{length(@parcels)} parcels"),
    MishkaPopover.title(@order.status),
    MishkaPopover.close("Got it") | rows
  ]}
</MishkaPopover>

Slot tags and builders

A label in <MishkaPopoverClose> builds the button this module styles and wires, which reports the panel closed through on_open_change. Markup puts your own controls in the footer row, and their handlers stay yours. Written bare, <MishkaPopoverArrow> draws the glyph that the side calls for.

Your screen receives one kind of message in handle_info/2. It carries the state the popover wants next.

<MishkaPopover id="details" open={@open?} on_open_change={:details}>
  <MishkaPopoverTrigger text="Details" />
  <MishkaPopoverTitle text="Shipped" />
  {content}
</MishkaPopover>

def handle_info({:tap, {:details, open?}}, socket) do
  {:noreply, Mob.Socket.assign(socket, :open?, open?)}
end

• modal and its backdrop are not ported. The panel's window is sized to the panel, so there is nothing to dim the page with. Use the Dialog or the Drawer when the page must be blocked.
• close_on_escape is not ported, because a phone has no Escape key.
• initial_focus and final_focus are not ported, because Mob exposes no focus model for a panel.
• labelledby and describedby are not ported, because no node has accessibility semantics. The title and description are drawn instead of referenced.
• open_on_hover, delay and close_delay are not ported. Use open_on_hold, a long press on the trigger.
• The *_class attributes are not ported. The chrome props style the panel.
• align defaults to :start where the web default is center, and side_offset is in dp where the web uses px.
• The panel floats on Android only. On iOS it stacks next to the trigger.

• Headless Popover, the web component this one ports.
• Mob Tooltip, a short hint revealed by a long press.
• Mob Preview Card, a card of detail revealed by holding a name.
• Mob Menu, a list of actions revealed from a trigger.
• Mob components, the full list of native components.