DocsComponentsHover card

Hover card

A preview card shown on hover and focus, in CSS only.

1 file

<pb-ui.hover-card>
  <pb-slot:trigger><pb-ui.button variant="link">@pyblade</pb-ui.button></pb-slot:trigger>
  <div class="flex gap-4">
    <pb-ui.avatar fallback="PB" class="size-10" />
    <div class="space-y-1">
      <h4 class="text-sm font-semibold">@pyblade</h4>
      <p class="text-sm">The Blade-style template engine, for Python.</p>
      <div class="text-xs text-muted-foreground">Joined January 2025</div>
    </div>
  </div>
</pb-ui.hover-card>

Installation

pyblade-ui add hover-card

Copy this file into your project

components/ui/hover_card.html

@props({'trigger': '', 'align': 'center'})
<span data-slot="hover-card" class="group/hover-card relative inline-flex">
  {{ trigger }}
  <div data-slot="hover-card-content" {{ attributes.cn(
      "invisible absolute top-full z-50 mt-2 w-64 rounded-md border bg-popover p-4 text-popover-foreground opacity-0 shadow-md transition-[opacity,visibility] delay-200 duration-150 group-focus-within/hover-card:visible group-focus-within/hover-card:opacity-100 group-hover/hover-card:visible group-hover/hover-card:opacity-100",
      {'start': 'left-0', 'center': 'left-1/2 -translate-x-1/2', 'end': 'right-0'}[align],
  ) }}>{{ slot }}</div>
</span>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tag <pb-ui.hover-card> is available in all your templates.

<pb-ui.hover-card>
  <pb-slot:trigger><a href="/u/ada" class="underline">@ada</a></pb-slot:trigger>
  <p class="text-sm">Ada Lovelace, first programmer.</p>
</pb-ui.hover-card>

Props

Prop	Default
trigger	''
align	'center'

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Popover Tooltip ›