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

import { Kanban } from "@svar-ui/react-kanban";
import MyTooltip from "./MyTooltip.jsx";

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

The tooltip component:

// MyTooltip.jsx
import "./MyTooltip.css";

function MyTooltip({ card }) {
  return (
    <div className="tip">
      <strong>{card.label}</strong>
      {card.deadline && <span>{card.deadline}</span>}
    </div>
  );
}

export default MyTooltip;

/* MyTooltip.css */
.tip {
    background: #222;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
}

Related

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