Popover

Popover::make() anchors a floating panel to a trigger of your choice. Clicking the trigger opens the panel; its content is a regular component schema.

PHP

Popover::make('plan-details')
  ->trigger([Text::make('Pro plan')])
  ->schema([
      Stack::make()->gap(Gap::Small)->schema([
          Heading::make('Pro plan', 3),
          Text::make('Unlimited seats, priority support, and SSO.'),
      ]),
  ]);

Preview

Tree

• ▾popover
  • align:"start"
  • label:null
  • side:"bottom"

  • ▾stack
    • align:null
    • direction:null
    • float:null
    • gap:"sm"
    • height:null
    • justify:null
    • sticky:false
    • width:null

    • ▾heading
      • copyable:false
      • level:3
      • text:"Pro plan"
      • tooltip:null
    • ▾text
      • align:null
      • color:null
      • copyable:false
      • size:"md"
      • text:"Unlimited seats, priority support, and SSO."
  • ▾text
    • align:null
    • color:null
    • copyable:false
    • size:"md"
    • text:"Pro plan"

Style

Warning

Keep the trigger non-interactive: it becomes the popover’s clickable button, so a button or link inside it would nest one interactive element in another. Use plain display components.

Positioning

->side() and ->align() place the panel relative to the trigger, taking the PopoverSide (Top, Right, Bottom, Left) and PopoverAlign (Start, Center, End) enums. The default is below the trigger, aligned to its start edge.

use Lattice\Ui\Enums\PopoverAlign;
use Lattice\Ui\Enums\PopoverSide;

Popover::make('details')
    ->side(PopoverSide::Right)
    ->align(PopoverAlign::Center)
    ->trigger([Badge::make('3 members')])
    ->schema([/* … */]);

Lazy content from a fragment

Popover content stays unmounted until the popover opens. Put a lazy fragment inside and the server request happens on first open — the popover shows the fragment’s skeleton while it loads:

Popover::make('customer-card')
    ->trigger([Text::make('Acme Inc.')])
    ->schema([
        Fragment::lazy(CustomerCardFragment::class, ['customerId' => $customerId]),
    ]);

Info

The popover’s content is remounted each time it opens, so a lazy fragment re-fetches on every open and always shows fresh data.

For the same pattern on a table cell, see the text column’s ->popover(). For an ⓘ info popover with trusted HTML content, reach for Tooltip instead.