tooltip

d2renderers/d2svg/d2svg.go

@@ -687,6 +687,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 		} else {
 			drawClass(writer, targetShape)
 		}
+		addAppendixItems(writer, targetShape)
 		fmt.Fprintf(writer, `</g>`)
 		fmt.Fprintf(writer, closingTag)
 		return labelMask, nil
@@ -700,6 +701,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 		} else {
 			drawTable(writer, targetShape)
 		}
+		addAppendixItems(writer, targetShape)
 		fmt.Fprintf(writer, `</g>`)
 		fmt.Fprintf(writer, closingTag)
 		return labelMask, nil
@@ -899,29 +901,33 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 		}
 	}
 
-	rightPadForTooltip := 0
+	addAppendixItems(writer, targetShape)
-	if targetShape.Tooltip != "" {
-		rightPadForTooltip = 2 * appendixIconRadius
-		fmt.Fprintf(writer, `<g transform="translate(%d %d)" class="appendix-icon">%s</g>`,
-			targetShape.Pos.X+targetShape.Width-appendixIconRadius,
-			targetShape.Pos.Y-appendixIconRadius,
-			TooltipIcon,
-		)
-		fmt.Fprintf(writer, `<title>%s</title>`, targetShape.Tooltip)
-	}
-
-	if targetShape.Link != "" {
-		fmt.Fprintf(writer, `<g transform="translate(%d %d)" class="appendix-icon">%s</g>`,
-			targetShape.Pos.X+targetShape.Width-appendixIconRadius-rightPadForTooltip,
-			targetShape.Pos.Y-appendixIconRadius,
-			LinkIcon,
-		)
-	}
 
 	fmt.Fprintf(writer, closingTag)
 	return labelMask, nil
 }
 
+func addAppendixItems(writer io.Writer, shape d2target.Shape) {
+	rightPadForTooltip := 0
+	if shape.Tooltip != "" {
+		rightPadForTooltip = 2 * appendixIconRadius
+		fmt.Fprintf(writer, `<g transform="translate(%d %d)" class="appendix-icon">%s</g>`,
+			shape.Pos.X+shape.Width-appendixIconRadius,
+			shape.Pos.Y-appendixIconRadius,
+			TooltipIcon,
+		)
+		fmt.Fprintf(writer, `<title>%s</title>`, shape.Tooltip)
+	}
+
+	if shape.Link != "" {
+		fmt.Fprintf(writer, `<g transform="translate(%d %d)" class="appendix-icon">%s</g>`,
+			shape.Pos.X+shape.Width-appendixIconRadius-rightPadForTooltip,
+			shape.Pos.Y-appendixIconRadius,
+			LinkIcon,
+		)
+	}
+}
+
 func RenderText(text string, x, height float64) string {
 	if !strings.Contains(text, "\n") {
 		return svg.EscapeText(text)

e2etests/stable_test.go

@@ -1795,6 +1795,16 @@ Listen <-> Talk: {
 	target-arrowhead.shape: diamond
 	label: hear
 }
+`,
+		},
+		{
+			name: "sql_table_tooltip_animated",
+			script: `
+x: {
+  shape: sql_table
+	y
+	tooltip: I like turtles
+}
 `,
 		},
 	}

e2etests/testdata/stable/sql_table_tooltip_animated/dagre/board.exp.json

@@ -0,0 +1,78 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "x",
+      "type": "sql_table",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 60,
+      "height": 72,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#0A0F25",
+      "stroke": "#FFFFFF",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "I like turtles",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": [
+        {
+          "name": {
+            "label": "y",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 10,
+            "labelHeight": 26
+          },
+          "type": {
+            "label": "",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 0,
+            "labelHeight": 0
+          },
+          "constraint": "",
+          "reference": ""
+        }
+      ],
+      "label": "x",
+      "fontSize": 20,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 17,
+      "labelHeight": 36,
+      "zIndex": 0,
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
+    }
+  ],
+  "connections": []
+}

e2etests/testdata/stable/sql_table_tooltip_animated/elk/board.exp.json

@@ -0,0 +1,78 @@
+{
+  "name": "",
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "x",
+      "type": "sql_table",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 60,
+      "height": 72,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#0A0F25",
+      "stroke": "#FFFFFF",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "I like turtles",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": [
+        {
+          "name": {
+            "label": "y",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 10,
+            "labelHeight": 26
+          },
+          "type": {
+            "label": "",
+            "fontSize": 0,
+            "fontFamily": "",
+            "language": "",
+            "color": "",
+            "italic": false,
+            "bold": false,
+            "underline": false,
+            "labelWidth": 0,
+            "labelHeight": 0
+          },
+          "constraint": "",
+          "reference": ""
+        }
+      ],
+      "label": "x",
+      "fontSize": 20,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 17,
+      "labelHeight": 36,
+      "zIndex": 0,
+      "level": 1,
+      "primaryAccentColor": "#0D32B2",
+      "secondaryAccentColor": "#4A6FF3",
+      "neutralAccentColor": "#676C7E"
+    }
+  ],
+  "connections": []
+}