Tooltip

This guide covers the card tooltip -- a passive hover overlay that shows extra information about a card without opening the editor or interrupting the user's flow.

Setup

The tooltip is a Svelte component you write. Pass it to the tooltip prop on <Kanban>, and the widget handles the rest -- tracking the mouse, resolving which card is hovered, mounting your component at the cursor, and tearing it down when the mouse leaves.

<script>
  import { Kanban } from "@svar-uisvelte-kanban";
  import CardTooltip from "./CardTooltip.svelte";
</script>

<Kanban {cards} {columns} tooltip={CardTooltip} />

When tooltip isn't set, no mouse-move listeners are attached to the board. Setting it at runtime adds them through normal Svelte reactivity -- no manual cleanup needed.

Component contract

Your tooltip component receives a single prop: card, the full KanbanCard object for the hovered card.

<!-- CardTooltip.svelte -->
<script>
  let { card } = $props();
</script>

<div class="my-tooltip">
  <strong>{card.label}</strong>
  {#if card.description}
    <p>{card.description}</p>
  {/if}
</div>

<style>
  .my-tooltip {
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    max-width: 280px;
  }
</style>

The widget mounts the component inside a fixed-position wrapper offset slightly from the cursor. It doesn't provide any default background, border, or padding -- your component owns all of its own styling.

A richer tooltip can pull in helper data. Here's one that resolves priority labels, progress, and assigned users:

<script>
  import { getPriorityOptions } from "@svar-uisvelte-kanban";

  const { card } = $props();
  const priorities = getPriorityOptions();

  const priorityLabel = $derived(
    card.priority != null
      ? priorities.find(p => p.id === card.priority)?.label
      : null
  );
</script>

<div class="card-tooltip">
  <div class="title">{card.label}</div>
  {#if card.description}
    <div class="desc">{card.description}</div>
  {/if}
  <div class="meta">
    {#if priorityLabel}
      <span class="chip">{priorityLabel}</span>
    {/if}
    {#if typeof card.progress === "number"}
      <span class="chip">{Math.round(card.progress * 100)}%</span>
    {/if}
  </div>
</div>

Styling and positioning notes

The tooltip wrapper uses position: fixed and pointer-events: none. This means:

• The tooltip follows the cursor but never intercepts clicks or hover events. Clicks pass straight through to the card underneath.
• Don't place interactive elements (buttons, links, inputs) inside the tooltip -- they won't receive events. If you need hover-then-interact behavior, use the cardPopup prop instead, which opens on click and is fully interactive.

The tooltip is suppressed automatically while a card popup is open, so the two never overlap.

The component re-mounts each time the hovered card changes. Keep the tooltip lightweight -- avoid expensive computations or large DOM trees that would cause jank as the user moves across cards.