"use client";

import { Background, Position, ReactFlow } from "@xyflow/react";
import {
  TooltipNode,
  type TooltipNodeType,
} from "@/components/tooltip-node";

const nodeTypes = {
  tooltip: TooltipNode,
};

const defaultNodes: TooltipNodeType[] = [
  {
    id: "1",
    position: { x: 200, y: 200 },
    data: {
      label: "Node with bottom tooltip",
      tooltip: {
        label: "I am a tooltip",
        position: Position.Bottom,
      },
    },
    type: "tooltip",
  },
  {
    id: "2",
    position: { x: 350, y: 380 },
    data: {
      label: "Node with top tooltip",
      tooltip: {
        label: "I am a tooltip",
        position: Position.Top,
      },
    },
    type: "tooltip",
  },
  {
    id: "3",
    position: { x: 0, y: 320 },
    data: {
      label: "Node with right tooltip",
      tooltip: {
        label: "I am a tooltip",
        position: Position.Right,
      },
    },
    type: "tooltip",
  },
];

const defaultEdges = [
  { id: "e1-2", source: "1", target: "2" },
  { id: "e1-3", source: "1", target: "3" },
];

export default function TooltipNodeDemo() {
  return (
    <div className="h-full w-full">
      <ReactFlow
        nodeTypes={nodeTypes}
        defaultNodes={defaultNodes}
        defaultEdges={defaultEdges}
        fitView
      >
        <Background />
      </ReactFlow>
    </div>
  );
}


import { useState } from "react";
import {
  Node,
  NodeProps,
  NodeToolbar,
  NodeToolbarProps,
  Handle,
  Position,
} from "@xyflow/react";
import { BaseNode } from "@/registry/components/base-node";

export type TooltipNodeType = Node<{
  label: string;
  tooltip?: {
    label: string;
    position?: NodeToolbarProps["position"];
  };
}>;

export function TooltipNode({ data, selected }: NodeProps<TooltipNodeType>) {
  const [isTooltipVisible, setTooltipVisible] = useState(false);

  return (
    <BaseNode
      onMouseEnter={() => setTooltipVisible(true)}
      onMouseLeave={() => setTooltipVisible(false)}
      selected={selected}
    >
      <NodeToolbar
        isVisible={isTooltipVisible || selected}
        className="rounded-sm bg-primary p-2 text-primary-foreground"
        position={data.tooltip?.position}
      >
        {data.tooltip?.label}
      </NodeToolbar>
      <div>{data.label}</div>
      <Handle type="target" position={Position.Top} />
      <Handle type="source" position={Position.Bottom} />
    </BaseNode>
  );
}


Tooltip Node

Installation