tooltip

Custom tooltip component rendered when the user hovers over a card. The widget handles positioning and lifecycle - the host component only provides the markup.

Usage

tooltip?: Component;

The component receives a single prop:

Field	Type	Description
card	KanbanCard	The hovered card

When tooltip is undefined (default), no hover listeners are attached to the board.

The tooltip is positioned at a fixed offset from the cursor and has pointer-events: none. Don't place interactive elements inside it - clicks pass through to the board. For hover-then-interact behavior, use cardPopup instead.

The tooltip hides automatically when a card popup opens.

Example

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

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

The tooltip component:

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

<div class="tip">
    <strong>{card.label}</strong>
    {#if card.deadline}<span>{card.deadline}</span>{/if}
</div>

<style>
    .tip {
        background: #222;
        color: #fff;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
    }
</style>

Related

• Tooltip guide — component contract, styling, and positioning
• cardPopup — interactive popup on click (vs passive hover tooltip)