Add node body tooltip - limit to link nodes for now

packages/node_modules/@node-red/editor-client/src/js/ui/view.js

@@ -1649,6 +1649,55 @@ RED.view = (function() {
         }
         return result;
     }
+    function showTooltip(x,y,content,direction) {
+        var tooltip = vis.append("g")
+            .attr("transform","translate("+x+","+y+")")
+            .attr("class","port_tooltip");
+
+        var lines = content.split("\n");
+        var labelWidth = 0;
+        var labelHeight = 4;
+        var labelHeights = [];
+        lines.forEach(function(l) {
+            var labelDimensions = calculateTextDimensions(l, "port_tooltip_label", 8,0);
+            labelWidth = Math.max(labelWidth,labelDimensions[0]);
+            labelHeights.push(0.8*labelDimensions[1]);
+            labelHeight += 0.8*labelDimensions[1];
+        });
+        var labelWidth1 = (labelWidth/2)-5-2;
+        var labelWidth2 = labelWidth - 4;
+
+        var labelHeight1 = (labelHeight/2)-5-2;
+        var labelHeight2 = labelHeight - 4;
+        var path;
+        var lx;
+        var ly = -labelHeight/2-2;
+        var anchor;
+        if (direction === "left") {
+            path = "M0 0 l -5 -5 v -"+(labelHeight1)+" q 0 -2 -2 -2 h -"+labelWidth+" q -2 0 -2 2 v "+(labelHeight2)+" q 0 2 2 2 h "+labelWidth+" q 2 0 2 -2 v -"+(labelHeight1)+" l 5 -5";
+            lx = -10;
+            anchor = "end";
+        } else if (direction === "right") {
+            path = "M0 0 l 5 -5 v -"+(labelHeight1)+" q 0 -2 2 -2 h "+labelWidth+" q 2 0 2 2 v "+(labelHeight2)+" q 0 2 -2 2 h -"+labelWidth+" q -2 0 -2 -2 v -"+(labelHeight1)+" l -5 -5"
+            lx = 10;
+            anchor = "start";
+        } else if (direction === "top") {
+            path = "M0 0 l 5 -5 h "+(labelWidth1)+" q 2 0 2 -2 v -"+labelHeight+" q 0 -2 -2 -2 h -"+(labelWidth2)+" q -2 0 -2 2 v "+labelHeight+" q 0 2 2 2 h "+(labelWidth1)+" l 5 5"
+            lx = labelWidth/2 - 4;
+            ly = -labelHeight-labelHeight / 2 + 2;
+            anchor = "end";
+        }
+        tooltip.append("path").attr("d",path);
+        lines.forEach(function(l,i) {
+            ly += labelHeights[i];
+            tooltip.append("svg:text").attr("class","port_tooltip_label")
+                .attr("x", lx)
+                .attr("y", ly)
+                .attr("text-anchor",anchor)
+                .text(l)
+        });
+        return tooltip;
+    }
     function portMouseOver(port,d,portType,portIndex) {
         clearTimeout(portLabelHoverTimeout);
         var active = (mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== portType));
@@ -1660,37 +1709,12 @@ RED.view = (function() {
                 }
                 var pos = getElementPosition(port.node());
                 portLabelHoverTimeout = null;
-                portLabelHover = vis.append("g")
+                portLabelHover = showTooltip(
-                    .attr("transform","translate("+(pos[0]+(portType===PORT_TYPE_INPUT?-2:12))+","+(pos[1]+5)+")")
+                    (pos[0]+(portType===PORT_TYPE_INPUT?-2:12)),
-                    .attr("class","port_tooltip");
+                    (pos[1]+5),
-                var lines = tooltip.split("\n");
+                    tooltip,
-                var labelWidth = 0;
+                    portType===PORT_TYPE_INPUT?"left":"right"
-                var labelHeight = 4;
-                var labelHeights = [];
-                lines.forEach(function(l) {
-                    var labelDimensions = calculateTextDimensions(l, "port_tooltip_label", 8,0);
-                    labelWidth = Math.max(labelWidth,labelDimensions[0]);
-                    labelHeights.push(0.8*labelDimensions[1]);
-                    labelHeight += 0.8*labelDimensions[1];
-                });
-
-                var labelHeight1 = (labelHeight/2)-5-2;
-                var labelHeight2 = labelHeight - 4;
-                portLabelHover.append("path").attr("d",
-                    portType===PORT_TYPE_INPUT?
-                        "M0 0 l -5 -5 v -"+(labelHeight1)+" q 0 -2 -2 -2 h -"+labelWidth+" q -2 0 -2 2 v "+(labelHeight2)+" q 0 2 2 2 h "+labelWidth+" q 2 0 2 -2 v -"+(labelHeight1)+" l 5 -5"
-                        :
-                        "M0 0 l 5 -5 v -"+(labelHeight1)+" q 0 -2 2 -2 h "+labelWidth+" q 2 0 2 2 v "+(labelHeight2)+" q 0 2 -2 2 h -"+labelWidth+" q -2 0 -2 -2 v -"+(labelHeight1)+" l -5 -5"
                 );
-                var y = -labelHeight/2-2;
-                lines.forEach(function(l,i) {
-                    y += labelHeights[i];
-                    portLabelHover.append("svg:text").attr("class","port_tooltip_label")
-                        .attr("x", portType===PORT_TYPE_INPUT?-10:10)
-                        .attr("y", y)
-                        .attr("text-anchor",portType===PORT_TYPE_INPUT?"end":"start")
-                        .text(l)
-                });
             },500);
         }
         port.classed("port_hovered",active);
@@ -2133,13 +2157,43 @@ RED.view = (function() {
                         })
                         .on("mouseover",function(d) {
                             if (mouse_mode === 0) {
-                                var node = d3.select(this);
+                                var nodeBody = d3.select(this);
-                                node.classed("node_hovered",true);
+                                nodeBody.classed("node_hovered",true);
+                                clearTimeout(portLabelHoverTimeout);
+                                if (d.type === "link in" || d.type === "link out") {
+                                    portLabelHoverTimeout = setTimeout(function() {
+                                        var tooltip;
+                                        if (d._def.label) {
+                                            tooltip = d._def.label;
+                                            try {
+                                                tooltip = (typeof tooltip === "function" ? tooltip.call(d) : tooltip)||"";
+                                            } catch(err) {
+                                                console.log("Definition error: "+d.type+".label",err);
+                                                tooltip = d.type;
+                                            }
+                                        }
+                                        if (tooltip !== "") {
+                                            var pos = getElementPosition(node.node());
+                                            portLabelHoverTimeout = null;
+                                            portLabelHover = showTooltip(
+                                                (pos[0] + d.w/2),
+                                                (pos[1]-1),
+                                                tooltip,
+                                                "top"
+                                            );
+                                        }
+                                    },500);
+                                }
                             }
                         })
                         .on("mouseout",function(d) {
-                            var node = d3.select(this);
+                            var nodeBody = d3.select(this);
-                            node.classed("node_hovered",false);
+                            nodeBody.classed("node_hovered",false);
+                            clearTimeout(portLabelHoverTimeout);
+                            if (portLabelHover) {
+                                portLabelHover.remove();
+                                portLabelHover = null;
+                            }
                         });
 
                    //node.append("rect").attr("class", "node-gradient-top").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-top)").style("pointer-events","none");

packages/node_modules/@node-red/editor-client/src/sass/flow.scss

@@ -281,14 +281,14 @@ g.link_unknown path.link_line {
     pointer-events: none;
 
     path {
-        fill: white;
+        fill: $popover-background;
-        stroke: #999;
+        stroke: $popover-background;
         stroke-width: 1;
     }
 }
 .port_tooltip_label {
     stroke-width: 0;
-    fill: #666;
+    fill: $popover-color;
     font-size: 12px;
     pointer-events: none;
     -webkit-touch-callout: none;