Hover Card

<div class="hover-card">
  <a class="hover-card-trigger" href="#">@johndoe</a>
  <div class="hover-card-content">
    <div class="hover-card-header">
      <div class="hover-card-avatar">
        <img src="https://i.pravatar.cc/48?u=1" alt="Avatar" />
      </div>
      <div class="hover-card-info">
        <h4 class="hover-card-title">John Doe</h4>
        <p class="hover-card-subtitle">@johndoe</p>
      </div>
    </div>
    <p class="hover-card-description">Full-stack developer. Building cool things with CSS and JavaScript.</p>
    <div class="hover-card-footer">
      <span class="hover-card-meta">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        1.2k followers
      </span>
      <span class="hover-card-meta">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
        Joined Dec 2023
      </span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative inline-block group">
  <a href="#" class="text-primary underline decoration-dashed underline-offset-4 hover:decoration-solid cursor-pointer inline-flex items-center gap-1">@johndoe</a>
  <div class="absolute z-600 w-80 p-3 bg-base-100 border border-base-300 rounded-box shadow-xl top-full left-1/2 -translate-x-1/2 mt-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all">
    <div class="flex items-start gap-3 mb-2">
      <div class="shrink-0 size-12 rounded-full overflow-hidden bg-base-200">
        <img src="https://i.pravatar.cc/48?u=1" alt="Avatar" class="w-full h-full object-cover" />
      </div>
      <div class="flex-1 min-w-0">
        <h4 class="font-semibold text-base whitespace-nowrap overflow-hidden text-ellipsis text-base-content m-0 mb-0.5">John Doe</h4>
        <p class="m-0 text-[0.8125rem] text-base-content/60">@johndoe</p>
      </div>
    </div>
    <p class="m-0 text-[0.8125rem] text-base-content/60 leading-normal">Full-stack developer. Building cool things with CSS and JavaScript.</p>
    <div class="flex items-center gap-3 mt-3 pt-2 border-t border-base-300 text-[0.8125rem] text-base-content/50">
      <span class="flex items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        1.2k followers
      </span>
      <span class="flex items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
        Joined Dec 2023
      </span>
    </div>
  </div>
</div>

Requires: tw.min.css

// Pure CSS: shows on :hover and :focus-within
// For JS control: add/remove .hover-card-open class
// Or use data-state="open" on .hover-card-content

<!-- Top -->
<div class="hover-card hover-card-top">
  <button class="hover-card-trigger btn">Hover (top)</button>
  <div class="hover-card-content">Content appears above</div>
</div>

<!-- Left -->
<div class="hover-card hover-card-left">
  <button class="hover-card-trigger btn">Hover (left)</button>
  <div class="hover-card-content">Content appears left</div>
</div>

<!-- Right -->
<div class="hover-card hover-card-right">
  <button class="hover-card-trigger btn">Hover (right)</button>
  <div class="hover-card-content">Content appears right</div>
</div>

Requires: ux.min.css

<!-- Top -->
<div class="relative inline-block group">
  <button class="btn">Hover (top)</button>
  <div class="absolute z-600 w-80 p-3 bg-base-100 border border-base-300 rounded-box shadow-xl bottom-full left-1/2 -translate-x-1/2 mb-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all">
    Content appears above
  </div>
</div>

<!-- Left -->
<div class="relative inline-block group">
  <button class="btn">Hover (left)</button>
  <div class="absolute z-600 w-80 p-3 bg-base-100 border border-base-300 rounded-box shadow-xl top-1/2 right-full -translate-y-1/2 mr-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all">
    Content appears left
  </div>
</div>

<!-- Right -->
<div class="relative inline-block group">
  <button class="btn">Hover (right)</button>
  <div class="absolute z-600 w-80 p-3 bg-base-100 border border-base-300 rounded-box shadow-xl top-1/2 left-full -translate-y-1/2 ml-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all">
    Content appears right
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — pure CSS positioning