Popover

Floating content containers

Preview

Popover content

Props Editor

✅ JSON is valid - Click "Preview Update" to see changes

Source Code

defmodule FeenixUiWeb.Components.PopoverComponent do
  use Phoenix.Component

  def render(assigns) do
    assigns = assign_new(assigns, :content, fn -> "Popover content" end)
    assigns = assign_new(assigns, :trigger, fn -> "Click me" end)
    assigns = assign_new(assigns, :placement, fn -> "top" end)

    ~H"""
    <div class="relative inline-block text-left">
      <button class="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
        <%= @trigger %>
      </button>
      <div class="absolute z-10 mt-2 w-48 bg-white rounded-md shadow-lg border border-gray-200">
        <div class="py-1">
          <div class="px-4 py-2 text-sm text-gray-700">
            <%= @content %>
          </div>
        </div>
      </div>
    </div>
    """
  end
end