Tooltip Node

A node that displays a tooltip when hovered. Built on top of the NodeToolbar component that comes with React Flow.

Dependencies:

Installation

Make sure to follow the prerequisites before installing the component.


npx shadcn@latest add https://ui.reactflow.dev/tooltip-node


pnpm dlx shadcn@latest add https://ui.reactflow.dev/tooltip-node


yarn dlx shadcn@latest add https://ui.reactflow.dev/tooltip-node


bun x shadcn@latest add https://ui.reactflow.dev/tooltip-node

Usage

1. Copy the component into your app


import React, { memo } from "react";
import { NodeProps, Position } from "@xyflow/react";
 
import {
  TooltipNode,
  TooltipContent,
  TooltipTrigger,
} from "@/components/tooltip-node";
 
const TooltipNodeDemo = memo(({ selected }: NodeProps) => {
  return (
    <TooltipNode selected={selected}>
      <TooltipContent position={Position.Top}>Hidden Content</TooltipContent>
      <TooltipTrigger>Hover</TooltipTrigger>
    </TooltipNode>
  );
});
 
export default TooltipNodeDemo;

2. Connect the component with your React Flow application.


import { Background, ReactFlow } from "@xyflow/react";
import TooltipNodeDemo from "./component-example";
 
const nodeTypes = {
  tooltipNode: TooltipNodeDemo,
};
 
const defaultNodes = [
  {
    id: "1",
    position: { x: 200, y: 200 },
    data: {},
    type: "tooltipNode",
  },
];
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
        <Background />
      </ReactFlow>
    </div>
  );
}