Overlays

Popover & tooltip

Anchored floating content and hints.

Popover

Popover content is a surface for form-like content. It keeps focus return, Escape, and outside-click dismissal while allowing interaction inside the panel. Unlike a dropdown menu, it does not close when a field is used.

Filter form

The default slot is the trigger and :content is the panel.

<.popover id="filters" placement="bottom-start"><.button variant="outline">Filters</.button><:content><.input name="query" label="Project name" /><.button size="sm">Apply</.button></:content></.popover>

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`class`	`any`	`nil`	Extra classes merged onto the panel.
`container_class`	`any`	`nil`	Extra classes on the popover root wrapper.
`controlled`	`boolean`	`false`	Server-driven open state: `open` is truth, patches flow into the machine.
`id`	`string`	`nil`	Stable DOM id for the overlay hook; auto-generated when omitted, mirroring Fluxon's popover (drop-in parity).
`on_change`	`string`	`nil`	Server event pushed on open change (`lantern:popover:set-open` replies).
`on_change_client`	`string`	`nil`	Bubbling DOM CustomEvent dispatched on open change.
`open`	`boolean`	`nil`	Open state for `controlled` mode (client mode ignores it).
`open_on_focus`	`boolean`	`false`	accepted for Fluxon compat; click only
`open_on_hover`	`boolean`	`false`	accepted for Fluxon compat; click only
`placement`	`bottom-start \| bottom-end \| top-start \| top-end`	`"bottom-start"`	Where the panel anchors relative to the trigger.
`target`	`string`	`nil`	accepted for Fluxon compat
Slots
`:content`*	Panel content.
`:inner_block`*	The trigger element.

Tooltip

Hover/focus tips with placement and optional arrow. Content can be a string or a :content slot.

Placement

placement positions the tip relative to the trigger.

<.tooltip id="tip-top" value="Placed on top" placement="top">
  <.button size="sm">Top</.button>
</.tooltip>
<.tooltip id="tip-bottom" value="Placed on bottom" placement="bottom">
  <.button size="sm">Bottom</.button>
</.tooltip>

Rich content

Use the :content slot for markup inside the tip.

<.tooltip id="tip-content" placement="top">
  <.button size="sm">Rich content</.button>
  <:content>
    <strong>Bold</strong> tip with <em>markup</em>
  </:content>
</.tooltip>

No arrow

arrow={false} removes the caret.

API reference

Props and slots, introspected from the component.

Prop	Type	Default	Description
`arrow`	`boolean`	`true`	Show the small pointer arrow toward the trigger.
`class`	`any`	`nil`	Extra classes merged onto the root element.
`controlled`	`boolean`	`false`	Server-driven open state: `open` is truth, patches flow into the machine.
`delay`	`integer`	`200`	Milliseconds before the tip appears on hover/focus.
`id`	`string`	`nil`	Stable DOM id for the tooltip hook; auto-generated when omitted, mirroring Fluxon's tooltip (drop-in parity).
`on_change`	`string`	`nil`	Server event pushed on open change (`lantern:tooltip:set-open` replies).
`on_change_client`	`string`	`nil`	Bubbling DOM CustomEvent dispatched on open change.
`open`	`boolean`	`nil`	Open state for `controlled` mode (client mode ignores it).
`placement`	`top \| bottom \| left \| right`	`"top"`	Preferred side of the trigger; may flip for viewport fit.
`value`	`string`	`nil`	Plain-text tip when no :content slot is given.
Slots
`:content`	Rich tip body; overrides `value` when present.
`:inner_block`*	Trigger element that shows the tip.