Node Tooltip

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

Dependencies:

@xyflow/react BaseNode

Installation

Make sure to follow the prerequisites before installing the component.


npx shadcn@latest add https://ui-components-git-dependabot-npmandyarnxyflow-bca43e-xyflow.vercel.app/node-tooltip


pnpm dlx shadcn@latest add https://ui-components-git-dependabot-npmandyarnxyflow-bca43e-xyflow.vercel.app/node-tooltip


yarn dlx shadcn@latest add https://ui-components-git-dependabot-npmandyarnxyflow-bca43e-xyflow.vercel.app/node-tooltip


bun x shadcn@latest add https://ui-components-git-dependabot-npmandyarnxyflow-bca43e-xyflow.vercel.app/node-tooltip

Usage

1. Copy the component into your app


import React, { memo } from "react";
import { Position } from "@xyflow/react";
 
import {
  NodeTooltip,
  NodeTooltipContent,
  NodeTooltipTrigger,
} from "@/components/node-tooltip";
import { BaseNode, BaseNodeContent } from "../base-node";
 
const NodeTooltipDemo = memo(() => {
  return (
    <NodeTooltip>
      <NodeTooltipContent position={Position.Top} className="text-center">
        You can display any content here, like text, images, or even components.{" "}
        <br />
        The tooltip will appear when you hover over the trigger.
      </NodeTooltipContent>
      <BaseNode className="w-64 text-center">
        <BaseNodeContent className="flex flex-col items-center">
          <NodeTooltipTrigger className="rounded border border-gray-300 p-2 text-lg font-bold">
            Hover me! ⭐️
          </NodeTooltipTrigger>
          <span>
            You can add more content that does not trigger the tooltip.
          </span>
        </BaseNodeContent>
      </BaseNode>
    </NodeTooltip>
  );
});
 
export default NodeTooltipDemo;

2. Connect the component with your React Flow application.


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