Popover

A popover is a non-modal dialog that floats around an associated trigger element.

<Overlay.popover :let={api} offset={12}>
  <button
    class={[
      "w-8 h-8 flex justify-center items-center text-slate-600 rounded-sm",
      "bg-white hover:bg-gray-100 shadow-sm"
    ]}
    {api.trigger_attrs}
  >
    <span class="sr-only">toggle edit name popover button</span>
    <Heroicons.pencil_square mini class="w-4 h-4" />
  </button>
  <div
    class="absolute z-10 max-w-sm"
    data-transition
    data-enter="transition duration-300"
    data-enter-from="opacity-0"
    data-enter-to="opacity-100"
    data-leave="transition duration-300"
    data-leave-from="opacity-100"
    data-leave-to="opacity-0"
    {api.panel_attrs}
  >
    <div class="overflow-hidden rounded-[5px] w-80 shadow-sm">
      <div class="relative bg-white px-6 py-4 flex flex-col">
        <div class="text-slate-700">
          <div>
            <label class="font-medium">First name:</label>
            <input
              type="text"
              class={[
                "mt-1 block w-full rounded-md border-gray-300 shadow-sm",
                "focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
              ]}
            />
          </div>
          <div class="mt-2">
            <label class="font-medium">First name:</label>
            <input
              type="text"
              class={[
                "mt-1 block w-full rounded-md border-gray-300 shadow-sm",
                "focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
              ]}
            />
          </div>
        </div>
        <div class="mt-4 flex justify-end space-x-4">
          <button
            class={[
              "flex justify-center items-center px-3 py-1.5 text-slate-600 font-semibold rounded-md",
              "bg-white hover:bg-gray-100 border border-gray-300 shadow-sm"
            ]}
            phx-click={api.close_popover_js}
          >
            Cancel
          </button>
          <button
            class={[
              "flex justify-center items-center px-3 py-1.5 text-gray-50 font-semibold rounded-md",
              "bg-sky-500/40 border border-gray-300 shadow-sm cursor-not-allowed"
            ]}
            disabled
          >
            Save
          </button>
        </div>
        <button
          class="absolute flex justify-center items-center top-1 right-1 w-6 h-6 hover:bg-gray-100 rounded-md"
          {api.close_button_attrs}
        >
          <Heroicons.x_mark mini class="w-5 h-5 text-slate-600" />
        </button>
      </div>
    </div>
  </div>
</Overlay.popover>

Setup

To use the popover component, you’ll have to import Floating and Popover modules in your assets/app.js.

import { createSproutConfig, Floating, Popover } from "sprout-ui";

const { initComponents, handleDomChange } = createSproutConfig({
  components: [Floating(), Popover()],
});

Anatomy

<sp-popover data-state="open | closed">
  <button data-part="trigger"></button>
  <div data-part="panel">
    <buton data-part="close-button"></button>
    <div data-part="arrow"></div>
  </div>
</sp-popover>

trigger: the trigger for the popover
panel: the panel for the popover content
arrow: optional arrow for the popover
close-button: optional close button for the popover

Under the hood, all the slot contents are rendered inside a sp-popover custom element.

Be cautious that the container must be a div tag because internally it is actually a customized builtin element.

Attributes

Attribute	Type	Description
`placement`	`:string`	Default placement for the tooltip, default to `"top"`
`offset`	`:integer`	The offset between the tooltip and the trigger
`close_on_esc`	`:boolean`	Whether to close the popover when `Escape` pressed, default to `true`
`close_on_click_away`	`:boolean`	Whether to close the popover when clicking outside the popover, default to `true`
`on_open`	`JS`	JS commands executed when the popover opened
`on_close`	`JS`	JS commands executed when the popover closed
`rest`	`:global`	Global attributes to be passed to the `sp-popover` element

API

API	Description
`trigger_attrs`	Attributes to be passed to the trigger part
`panel_attrs`	Attributes to be passed to the panel part
`arrow_attrs`	Attributes to be passed to the arrow part
`close_button_attrs`	Attributes to be passed to the close-button part
`open_popover_js`	JS commands to open the popover
`close_popover_js`	JS commands to close the popover

Transition

The panel element can have transitions when the popover is showing or hiding. Check out the guide on Transition.