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 setup>
    import { Kanban } from "@svar-ui/vue-kanban";
    import MyTooltip from "./MyTooltip.vue";
</script>

<template>
    <Kanban :cards="cards" :columns="columns" :tooltip="MyTooltip" />
</template>

The tooltip component:

<!-- MyTooltip.vue -->
<script setup>
    defineProps({ card: {} });
</script>

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

<style scoped>
    .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)