Feature: Tooltips

README.md

@@ -198,6 +198,79 @@ const Example = (
 ### Readonly Mode
 [stories/ReadonlyMode.tsx](./stories/ReadonlyMode.tsx)
 
+### Tooltips
+[stories/Tooltips.tsx](./stories/Tooltips.tsx)
+
+You can add tooltips by adding `tooltipsGlobal` into the chartState (`IChart`) or `tooltip` to the node objects.
+`tooltipsGlobal` will apply for all nodes and `tooltip` for individual nodes.
+
+#### Example
+
+```tsx
+
+export const tooltipChart: IChart = {
+  tooltipsGlobal: {
+    showTooltip: true,
+    toogleOffWhenClicked: 'global',
+    text: 'This is the global tooltip and will be toggled off, when clicked',
+  },
+  offset: {
+    x: 0,
+    y: 0,
+  },
+  scale: 1,
+  nodes: {
+    node1: {
+      tooltip: {
+        showTooltip: true,
+        text: 'this is the tooltip for node1',
+      },
+...
+  node2: {
+    tooltip: {
+     showTooltip: true,
+      toogleOffWhenClicked: 'node',
+      text: 'this is the tooltip for node2 and will be toggled off when clicked',
+    },
+    id: 'node2',
+... 
+  node3: {
+    tooltip: {
+     showTooltip: false,
+      text: 'this is the tooltip for node3 but its off',
+    },
+    id: 'node3',
+    type: 'input-output',
+    position: {
+     x: 100,
+      y: 600,
+    },
+...
+```
+You can also customize the tooltipComponent by adding it to Component props of flowChart:
+
+```tsx
+const ExampleToolTipComponent = (props: ITooltipComponentDefaultProps) => {
+  return (
+    <div className="ExampleToolTipComponent" style={{ width: '300px', textAlign: 'center' }}>
+       <h2 style={{ margin: 'auto' }}>{props.tooltip}</h2>
+    </div>
+  )
+}
+
+export class Tooltips extends React.Component {
+...
+  return (            
+    <Page>
+      <FlowChart
+        chart={chart}
+        callbacks={stateActions}
+        Components={{TooltipComponent: ExampleToolTipComponent}}/>
+    </Page>)
+}
+
+```
+
 ### Other Demos
 [stories/ExternalReactState.tsx](./stories)
 

package.json

@@ -40,6 +40,7 @@
     "pathfinding": "^0.4.18",
     "react-draggable": "^4.4.3",
     "react-resize-observer": "^1.1.1",
+    "react-tooltip": "^4.2.10",
     "react-zoom-pan-pinch": "^1.6.1",
     "uuid": "^3.3.2"
   },

src/components/FlowChart/FlowChart.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import {
-  CanvasInnerDefault, CanvasOuterDefault, CanvasWrapper, ICanvasInnerDefaultProps, ICanvasOuterDefaultProps, IChart, IConfig, ILink,
-  ILinkDefaultProps, INodeDefaultProps, INodeInnerDefaultProps, IOnCanvasClick, IOnCanvasDrop, IOnDeleteKey, IOnDragCanvas,
-  IOnDragCanvasStop, IOnDragNode, IOnDragNodeStop, IOnLinkCancel, IOnLinkClick, IOnLinkComplete, IOnLinkMouseEnter,
-  IOnLinkMouseLeave, IOnLinkMove, IOnLinkStart, IOnNodeClick, IOnNodeDoubleClick, IOnNodeMouseEnter, IOnNodeMouseLeave, IOnNodeSizeChange,
-  IOnPortPositionChange, IOnZoomCanvas, IPortDefaultProps, IPortsDefaultProps, ISelectedOrHovered, LinkDefault, LinkWrapper, NodeDefault, NodeInnerDefault, NodeWrapper, PortDefault, PortsDefault,
+  CanvasInnerDefault, CanvasOuterDefault, CanvasWrapper, ICanvasInnerDefaultProps, ICanvasOuterDefaultProps, IChart, IConfig, IDeleteTooltip,
+  ILink, ILinkDefaultProps, INodeDefaultProps, INodeInnerDefaultProps, IOnCanvasClick, IOnCanvasDrop, IOnDeleteKey, IOnDragCanvas, IOnDragCanvasStop, IOnDragNode, IOnDragNodeStop,
+  IOnLinkCancel, IOnLinkClick, IOnLinkComplete, IOnLinkMouseEnter, IOnLinkMouseLeave, IOnLinkMove, IOnLinkStart, IOnNodeClick, IOnNodeDoubleClick,
+  IOnNodeMouseEnter, IOnNodeMouseLeave, IOnNodeSizeChange, IOnPortPositionChange, IOnZoomCanvas, IPortDefaultProps, IPortsDefaultProps, ISelectedOrHovered, IToggletooltip,
+  ITooltipComponentDefaultProps, LinkDefault, LinkWrapper, NodeDefault, NodeInnerDefault, NodeWrapper, PortDefault, PortsDefault, TooltipComponentDefault,
 } from '../../'
 import { getMatrix } from './utils/grid'
 
@@ -29,7 +29,9 @@ export interface IFlowChartCallbacks {
   onNodeMouseEnter: IOnNodeMouseEnter
   onNodeMouseLeave: IOnNodeMouseLeave
   onNodeSizeChange: IOnNodeSizeChange
-  onZoomCanvas: IOnZoomCanvas
+  onZoomCanvas: IOnZoomCanvas,
+  deleteTooltip: IDeleteTooltip,
+  toggleTooltip: IToggletooltip,
 }
 
 export interface IFlowChartComponents {
@@ -40,6 +42,7 @@ export interface IFlowChartComponents {
   Port?: React.FunctionComponent<IPortDefaultProps>
   Node?: React.FunctionComponent<INodeDefaultProps>
   Link?: React.FunctionComponent<ILinkDefaultProps>
+  TooltipComponent?: React.FunctionComponent<ITooltipComponentDefaultProps>
 }
 
 export interface IFlowChartProps {
@@ -90,6 +93,8 @@ export const FlowChart = (props: IFlowChartProps) => {
       onNodeMouseLeave,
       onNodeSizeChange,
       onZoomCanvas,
+      deleteTooltip,
+      toggleTooltip,
     },
     Components: {
       CanvasOuter = CanvasOuterDefault,
@@ -99,14 +104,15 @@ export const FlowChart = (props: IFlowChartProps) => {
       Port = PortDefault,
       Node = NodeDefault,
       Link = LinkDefault,
+      TooltipComponent = TooltipComponentDefault,
     } = {},
     config = {},
   } = props
   const { links, nodes, selected, hovered, offset, scale } = chart
 
   const canvasCallbacks = { onDragCanvas, onDragCanvasStop, onCanvasClick, onDeleteKey, onCanvasDrop, onZoomCanvas }
   const linkCallbacks = { onLinkMouseEnter, onLinkMouseLeave, onLinkClick }
-  const nodeCallbacks = { onDragNode, onNodeClick, onDragNodeStop, onNodeMouseEnter, onNodeMouseLeave, onNodeSizeChange,onNodeDoubleClick }
+  const nodeCallbacks = { onDragNode, onNodeClick, onDragNodeStop, onNodeMouseEnter, onNodeMouseLeave, onNodeSizeChange,onNodeDoubleClick, deleteTooltip, toggleTooltip }
   const portCallbacks = { onPortPositionChange, onLinkStart, onLinkMove, onLinkComplete, onLinkCancel }
 
   const nodesInView = Object.keys(nodes).filter((nodeId) => {
@@ -171,12 +177,18 @@ export const FlowChart = (props: IFlowChartProps) => {
         const selectedLink = getSelectedLinkForNode(selected, nodeId, links)
         const hoveredLink = getSelectedLinkForNode(hovered, nodeId, links)
 
+        const nodeWithGlobalTooltip = { ...nodes[nodeId] }
+        if (chart.tooltipsGlobal && chart.tooltipsGlobal.showTooltip) {
+          nodeWithGlobalTooltip.tooltip = chart.tooltipsGlobal
+        }
+
         return (
           <NodeWrapper
             config={config}
             key={nodeId}
             Component={Node}
-            node={nodes[nodeId]}
+            TooltipComponent={TooltipComponent}
+            node={nodeWithGlobalTooltip}
             offset={chart.offset}
             isSelected={isSelected}
             selected={selectedLink ? selected : undefined}

src/components/Link/Link.default.tsx

@@ -37,7 +37,6 @@ export const LinkDefault = (props: ILinkDefaultProps) => {
     endPos,
     ...props,
   }
-
   return config.showArrowHead
     ? <ArrowLink {...linkProps} />
     : <RegularLink {...linkProps} />

src/components/Node/Node.wrapper.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react'
 import Draggable, { DraggableData } from 'react-draggable'
 import ResizeObserver from 'react-resize-observer'
+import ReactTooltip from 'react-tooltip'
 import {
   IConfig,
+  IDeleteTooltip,
   ILink,
   INode,
   INodeInnerDefaultProps,
@@ -23,16 +25,21 @@ import {
   IPosition,
   ISelectedOrHovered,
   ISize,
+  IToggletooltip,
+  ITooltipComponentDefaultProps,
   PortWrapper,
+  TooltipComponentDefault,
 } from '../../'
 import { noop } from '../../utils'
 import CanvasContext from '../Canvas/CanvasContext'
+import { TooltipComponentWrapper } from '../TooltipComponent/TooltipComponent.Wrapper'
 import { INodeDefaultProps, NodeDefault } from './Node.default'
 
 export interface INodeWrapperProps {
   config: IConfig
   node: INode
   Component: React.FunctionComponent<INodeDefaultProps>
+  TooltipComponent?: React.FunctionComponent<ITooltipComponentDefaultProps>
   offset: IPosition
   selected: ISelectedOrHovered | undefined
   hovered: ISelectedOrHovered | undefined
@@ -54,6 +61,8 @@ export interface INodeWrapperProps {
   onNodeSizeChange: IOnNodeSizeChange
   onNodeMouseEnter: IOnNodeMouseEnter
   onNodeMouseLeave: IOnNodeMouseLeave
+  deleteTooltip: IDeleteTooltip
+  toggleTooltip: IToggletooltip
 }
 
 export const NodeWrapper = ({
@@ -65,6 +74,7 @@ export const NodeWrapper = ({
   onNodeDoubleClick,
   isSelected,
   Component = NodeDefault,
+  TooltipComponent = TooltipComponentDefault,
   onNodeSizeChange,
   onNodeMouseEnter,
   onNodeMouseLeave,
@@ -81,6 +91,8 @@ export const NodeWrapper = ({
   onLinkMove,
   onLinkComplete,
   onLinkCancel,
+  toggleTooltip,
+  deleteTooltip,
 }: INodeWrapperProps) => {
   const { zoomScale } = React.useContext(CanvasContext)
   const [size, setSize] = React.useState<ISize>({ width: 0, height: 0 })
@@ -119,6 +131,12 @@ export const NodeWrapper = ({
           onNodeClick({ config, nodeId: node.id })
         }
       }
+      if (node.tooltip && node.tooltip.showTooltip) {
+        switch (node.tooltip.toogleOffWhenClicked) {
+          case 'global': toggleTooltip({ nodeId: 'global' }); break
+          case 'node' : toggleTooltip({ nodeId: node.id }); break
+        }
+      }
     },
     [config, node.id],
   )
@@ -157,8 +175,16 @@ export const NodeWrapper = ({
     }
   }, [node, compRef.current, size.width, size.height])
 
+  let tooltip = ''
+  if (node.tooltip && node.tooltip.showTooltip) {
+    tooltip = node.tooltip.text
+  }
   const children = (
-    <div style={{ minWidth: portsSize.width, minHeight: portsSize.height }}>
+    <div
+        style={{ minWidth: portsSize.width, minHeight: portsSize.height }}
+        data-for={node.id}
+        data-tip=""
+    >
       <ResizeObserver
         onResize={(rect) => {
           const newSize = { width: rect.width, height: rect.height }
@@ -189,6 +215,9 @@ export const NodeWrapper = ({
           />
         ))}
       </Ports>
+      <ReactTooltip id={node.id}>
+        {tooltip && <TooltipComponentWrapper Component={TooltipComponent} tooltip={tooltip}/>}
+      </ReactTooltip>
     </div>
   )
 

src/components/TooltipComponent/TooltipComponent.Wrapper.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { ITooltipComponentDefaultProps, TooltipComponentDefault } from './TooltipComponent.default'
+
+export const TooltipComponentWrapper =
+  ({
+   Component = TooltipComponentDefault,
+   tooltip,
+   }: ITooltipComponentWrapperProps) => {
+    return (
+    <>
+      <Component tooltip={tooltip}/>
+    </>
+    )
+  }
+export interface ITooltipComponentWrapperProps {
+  Component: React.FunctionComponent<ITooltipComponentDefaultProps>
+  className?: string
+  tooltip: string
+  style?: object
+}

src/components/TooltipComponent/TooltipComponent.default.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+export const TooltipComponentDefault = ({ tooltip }: ITooltipComponentDefaultProps) => {
+  return (
+        <>{tooltip}</>
+  )
+}
+export interface ITooltipComponentDefaultProps {
+  className?: string
+  tooltip: string
+  style?: object
+}

src/components/TooltipComponent/index.ts

@@ -0,0 +1 @@
+export * from './TooltipComponent.default'

src/components/index.ts

@@ -6,3 +6,4 @@ export * from './Ports'
 export * from './PortsGroup'
 export * from './Link'
 export * from './FlowChart'
+export * from './TooltipComponent'