DocsComposantsHover card

Hover card

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

1 fichier

<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">Le moteur de templates à la Blade, pour Python.</p>
      <div class="text-xs text-muted-foreground">Rejoint en janvier 2025</div>
    </div>
  </div>
</pb-ui.hover-card>

Installation

pyblade-ui add hover-card

Copiez ce fichier dans votre projet

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>

Adaptez le chemin à votre projet
Le dossier components est celui déclaré dans pyblade.toml.

Utilisation

La balise <pb-ui.hover-card> est disponible dans tous vos 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	Défaut
trigger	''
align	'center'

Tout autre attribut (class, id, x-on:click, hx-post…) est transmis à l'élément racine ; vos classes Tailwind l'emportent sur celles du composant.

‹ Popover Tooltip ›