Phlex Components
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
  <div data-controller="popover" data-popover-options-value="{"delay":[500,250],"trigger":"mouseenter focus click"}">
    <div data-popover-target="trigger" class="inline-block"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary underline-offset-4 hover:underline px-4 py-2 h-9 text-sm">@joeldrapper</button></div>
    <template data-popover-target="content">
      <div data-state="open" class="z-50 rounded-md border bg-background p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">
        <div class="flex justify-between space-x-4"><span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-base"><img loading="lazy" class="aspect-square h-full w-full" alt="joeldrapper" src="https://avatars.githubusercontent.com/u/246692?v=4"><span class="flex h-full w-full items-center justify-center rounded-full bg-muted">JD</span></span>
          <div class="space-y-1">
            <h4 class="text-sm font-medium">@joeldrapper</h4>
            <p class="text-sm">Creator of Phlex Components. Ruby on Rails developer.</p>
            <div class="flex items-center pt-2"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4 opacity-70"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path><path d="M8 14h.01"></path><path d="M12 14h.01"></path><path d="M16 14h.01"></path><path d="M8 18h.01"></path><path d="M12 18h.01"></path><path d="M16 18h.01"></path></svg><span class="text-xs text-muted-foreground">Joined December 2021</span></div>
          </div>
        </div>
      </div>
    </template></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
render(TestView.new) do
  HoverCard do
    HoverCardTrigger { Button(variant: :link) { "@joeldrapper" } }
    HoverCardContent do
      div(class: "flex justify-between space-x-4") do
        Avatar do
          AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
          AvatarFallback { "JD" }
        end
        div(class: "space-y-1") do
          h4(class: "text-sm font-medium") { "@joeldrapper" }
          p(class: "text-sm") { "Creator of Phlex Components. Ruby on Rails developer." }
          div(class: "flex items-center pt-2") do
            plain(helpers.lucide_icon("calendar-days", class: "mr-2 h-4 w-4 opacity-70"))
            span(class: "text-xs text-muted-foreground") { "Joined December 2021" }
          end
        end
      end
    end
  end
end

Default HoverCard

No params configured.