tooltip-node.tsx

Overview

The tooltip-node.tsx file defines a set of React components designed to provide tooltip functionality within a node-based UI framework. It leverages React's context and hooks to manage tooltip visibility state and facilitates the display of contextual tooltips upon user interaction such as mouse hover or keyboard focus.

This file exports three primary components:

TooltipNode: Wraps a node element to control tooltip visibility state based on user interactions.
TooltipContent: Displays the tooltip content conditionally depending on the visibility state.
TooltipTrigger: A simple wrapper component that can be used to designate the tooltip trigger area.

These components integrate with the @xyflow/react library’s NodeProps, NodeToolbar, and related types, as well as a local BaseNode component, enabling them to fit seamlessly into the larger node-based UI system.

Components and Types

TooltipNode

export type TooltipNodeProps = Partial<NodeProps> & {
  children?: ReactNode;
};

export const TooltipNode: React.ForwardRefExoticComponent<
  TooltipNodeProps & React.RefAttributes<HTMLDivElement>
>

Description

TooltipNode is a React component that wraps around a node element and provides tooltip visibility context. It manages the tooltip's visibility based on user interaction events such as mouse enter/leave and focus/blur.

Parameters

selected?: boolean (from NodeProps): Indicates if the node is currently selected.
children?: ReactNode: The child elements to render inside the node wrapper.
ref: A React ref forwarded to the underlying BaseNode component's DOM element.

State

isTooltipVisible: boolean — Controlled internally using useState, toggled on mouse/focus events.

Behavior

Shows tooltip on mouse enter and focus.
Hides tooltip on mouse leave and blur.
Provides tooltip visibility state via React Context (TooltipContext).

Usage Example

<TooltipNode selected={true}>
  <SomeNodeContent />
  <TooltipContent position="top">
    Tooltip text here
  </TooltipContent>
</TooltipNode>

TooltipContent

export type TooltipContentProps = NodeToolbarProps;

export const TooltipContent: React.ForwardRefExoticComponent<
  TooltipContentProps & React.RefAttributes<HTMLDivElement>
>

Description

TooltipContent consumes the tooltip visibility context and conditionally displays its children inside a NodeToolbar component. It is intended to be used as the tooltip popup content associated with a TooltipNode.

Parameters

position?: string (from NodeToolbarProps): Position of the tooltip relative to the node.
children?: ReactNode: The content to be rendered inside the tooltip.
ref: A React ref forwarded to the wrapping <div> element.

Behavior

Reads visibility state from TooltipContext.
Passes visibility state as isVisible prop to NodeToolbar.
Uses fixed styles for transparency and text coloring.
Supports keyboard navigation via tabIndex=1.

Usage Example

<TooltipContent position="bottom">
  <div>Tooltip details here</div>
</TooltipContent>

TooltipTrigger

export type TooltipTriggerProps = HTMLAttributes<HTMLParagraphElement>;

export const TooltipTrigger: React.ForwardRefExoticComponent<
  TooltipTriggerProps & React.RefAttributes<HTMLParagraphElement>
>

Description

TooltipTrigger is a lightweight wrapper component that can be used to visually or semantically designate the tooltip trigger area inside a node. It forwards all standard HTML paragraph attributes and refs.

Parameters

children?: ReactNode: Content inside the trigger area.
...props: Standard HTML attributes for a <p> element.
ref: A React ref forwarded to the wrapping <div> element (for flexibility).

Usage Example

<TooltipTrigger>
  Hover or focus me to trigger tooltip
</TooltipTrigger>

Implementation Details and Algorithms

Tooltip Visibility State Management:
The TooltipNode component uses React's useState hook to track whether the tooltip should currently be visible (isTooltipVisible). It toggles this state in response to four events: onMouseEnter, onMouseLeave, onFocus, and onBlur.
Context Usage:
Tooltip visibility state is provided through a React Context (TooltipContext), allowing child components like TooltipContent to access the visibility status without prop drilling.
Accessibility:
The BaseNode component wrapped in TooltipNode is given a tabIndex of 0, making it keyboard-focusable. The TooltipContent has tabIndex 1, enabling keyboard navigation to the tooltip content itself.
Ref Forwarding:
Each component uses forwardRef to expose references to their underlying DOM elements, which helps with integration in larger component trees, especially for focus management or integration with other libraries.
Styling:
Minimal inline styling and class names are used to ensure transparent backgrounds and consistent text colors, leaving detailed styling to be handled externally or via Tailwind CSS classes (bg-transparent, text-primary-foreground).

Interaction with Other Parts of the System

BaseNode:
The TooltipNode component wraps the BaseNode component (imported locally), extending its functionality by adding tooltip visibility state management and event handlers.
@xyflow/react Library:
The file imports types and components (NodeProps, NodeToolbar, NodeToolbarProps) from the @xyflow/react package.
- NodeToolbar is used as the container for tooltip content with positioning and visibility controls.
- NodeProps and NodeToolbarProps define the expected props interfaces for nodes and toolbars.
React Context:
The tooltip visibility context (TooltipContext) is shared between the TooltipNode and TooltipContent components. This design allows multiple nested components to respond dynamically to the tooltip's visibility state without explicit prop passing.

Mermaid Diagram: Component Interaction and Structure

componentDiagram
    TooltipNode <|-- BaseNode
    TooltipNode --> TooltipContext : Provides isTooltipVisible
    TooltipContent ..> TooltipContext : Consumes isTooltipVisible
    TooltipContent --> NodeToolbar
    TooltipTrigger --> div

Summary

The tooltip-node.tsx file provides a modular, accessible, and context-driven tooltip implementation tailored for node-based interfaces. By leveraging React's context and hooks, it cleanly separates concerns between managing tooltip visibility (TooltipNode), displaying tooltip content (TooltipContent), and defining trigger areas (TooltipTrigger). It integrates seamlessly with the @xyflow/react ecosystem and a local BaseNode component, making it a reusable building block for interactive node UIs.

If you have any questions about extending this tooltip system or integrating it with other parts of your application, feel free to ask!