Skip to main content

Popover

Present labelled interactive content adjacent to a trigger with focus and dismissal ownership.

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let profilePopover =
    Popover.create "profile-popover" "Account details" (span { "Account details" }) "Account details" (p { "Signed in as Alex Morgan." })
    |> Popover.render

On this page

Installation

Copy this component and its required dependencies into the consumer-owned Components project.

dotnet fve add popover --config src/Acme.Components/fve.json

The CLI resolves dependencies and preserves consumer-authored files. See Installation for project initialization and Tailwind source detection.

Usage

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let profilePopover =
    Popover.create "profile-popover" "Account details" (span { "Account details" }) "Account details" (p { "Signed in as Alex Morgan." })
    |> Popover.render

Initial content focus

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let focusedProfilePopover =
    let content =
        div {
            _class "grid gap-4"
            Input.create "displayName" "Display name" |> Input.withValue "Alex Morgan" |> Input.render
            p { _class "text-sm text-[var(--fve-muted-text)]"; "This local example does not save changes." }
        }
    Popover.create "focused-profile-popover" "Edit profile" (span { "Edit profile" }) "Edit profile" content
    |> Popover.focusContentOnOpen
    |> Popover.render

Side and alignment

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let alignedPopover =
    Popover.create "filter-popover" "Open filter details" (span { "Filter details" }) "Filter details" (p { _class "text-sm text-[var(--fve-muted-text)]"; "Showing active accounts with balances above zero." })
    |> Popover.withAlignment PopoverAlignment.End
    |> Popover.withSide PopoverSide.Top
    |> Popover.render

API reference

type PopoverSide =
    | Top
    | Bottom
    | Start
    | End

type PopoverAlignment =
    | Start
    | Center
    | End

type PopoverConfig

module Popover =
    val create : id:string -> triggerLabel:string -> trigger:HtmlElement -> contentLabel:string -> content:HtmlElement -> PopoverConfig
    val withSide : side:PopoverSide -> config:PopoverConfig -> PopoverConfig
    val withAlignment : alignment:PopoverAlignment -> config:PopoverConfig -> PopoverConfig
    val focusContentOnOpen : config:PopoverConfig -> PopoverConfig
    val withTriggerAttributes : attributes:HtmlAttribute list -> config:PopoverConfig -> PopoverConfig
    val withAttributes : attributes:HtmlAttribute list -> config:PopoverConfig -> PopoverConfig
    val render : config:PopoverConfig -> HtmlElement