diff --git a/d2renderers/d2svg/appendix/appendix.go b/d2renderers/d2svg/appendix/appendix.go
index 28c5d0f22..d3eca6479 100644
--- a/d2renderers/d2svg/appendix/appendix.go
+++ b/d2renderers/d2svg/appendix/appendix.go
@@ -96,6 +96,16 @@ func AppendTooltips(diagram *d2target.Diagram, ruler *textmeasure.Ruler, in []by
closingIndex := strings.LastIndex(svg, "")
svg = svg[:closingIndex] + appendix + svg[closingIndex:]
+ i := 1
+ for _, s := range diagram.Shapes {
+ if s.Tooltip != "" {
+ // The clip-path has a unique ID, so this won't replace any user icons
+ // In the existing SVG, the transform places it top-left, so we adjust
+ svg = strings.Replace(svg, d2svg.TooltipIcon, generateNumberedIcon(i, 0, ICON_RADIUS), 1)
+ i++
+ }
+ }
+
return []byte(svg)
}
@@ -120,6 +130,16 @@ func generateTooltipAppendix(diagram *d2target.Diagram, ruler *textmeasure.Ruler
`, tl.X, br.Y, (br.X - tl.X), strings.Join(tooltipLines, "\n")), maxWidth, totalHeight
}
+func generateNumberedIcon(i, x, y int) string {
+ line := fmt.Sprintf(``,
+ x+ICON_RADIUS, y, ICON_RADIUS)
+
+ line += fmt.Sprintf(`%d`,
+ x+ICON_RADIUS, y+5, FONT_SIZE, i)
+
+ return line
+}
+
func generateTooltipLine(i, y int, text string, ruler *textmeasure.Ruler) (string, int, int) {
mtext := &d2target.MText{
Text: text,
@@ -129,11 +149,8 @@ func generateTooltipLine(i, y int, text string, ruler *textmeasure.Ruler) (strin
dims := d2graph.GetTextDimensions(nil, ruler, mtext, nil)
// TODO box-shadow: 0px 0px 32px rgba(31, 36, 58, 0.1);
- line := fmt.Sprintf(``,
- ICON_RADIUS, y)
-
- line += fmt.Sprintf(`%d`,
- ICON_RADIUS, y+5, FONT_SIZE, i)
+ line := fmt.Sprintf(`%s`,
+ 0, y, generateNumberedIcon(i, 0, 0))
line += fmt.Sprintf(`%s`,
ICON_RADIUS*3, y, FONT_SIZE, d2svg.RenderText(text, ICON_RADIUS*3, float64(dims.Height)))
diff --git a/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg b/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg
index 66530c536..08a8b08b2 100644
--- a/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg
+++ b/d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg
@@ -18,33 +18,7 @@ width="1959" height="2297" viewBox="-175 -47 1959 2297">customerissuerstore
-Like starbucks or somethingacquirer
-I'm not sure what this isnetworkcustomer bankstore bankinitial transactionpayment processor behind the scenessimplified1 banana please$10 dollarsthinking: wow, inflationchecks bank accountSavings: $11I can do that, here's my cardRun this cardProcess to card issuerProcess this payment$10 debit$10 creditAn error in judgement is about to occur
+customerissuerstore1Like starbucks or somethingacquirer2I'm not sure what this isnetworkcustomer bankstore bankinitial transactionpayment processor behind the scenessimplified1 banana please$10 dollarsthinking: wow, inflationchecks bank accountSavings: $11I can do that, here's my cardRun this cardProcess to card issuerProcess this payment$10 debit$10 creditAn error in judgement is about to occur
@@ -74,8 +48,8 @@ width="1959" height="2297" viewBox="-175 -47 1959 2297">1Like starbucks or something
-2I'm not sure what this is
+}]]>1Like starbucks or something
+2I'm not sure what this isx
-Total abstinence is easier than perfect moderationy
-Gee, I feel kind of LIGHT in the head now,
+</style><g id="x"><g class="shape" ><rect x="1" y="0" width="113" height="126" style="fill:#F7F8FE;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text-bold" x="57.500000" y="66.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">x</text><g transform="translate(98 -16)"><circle cx="16" cy="16" r="16" fill="white" stroke="#DEE1EB" /><text class="text-bold" x="16" y="21" style="font-size: 16px;text-anchor:middle;">1</text></g><title>Total abstinence is easier than perfect moderationy2Gee, I feel kind of LIGHT in the head now,
knowing I can't make my satellite dish PAYMENTS!
@@ -55,8 +29,8 @@ knowing I can't make my satellite dish PAYMENTS!1Total abstinence is easier than perfect moderation
-2Gee, I feel kind of LIGHT in the head now,knowing I can't make my satellite dish PAYMENTS!
+}]]>1Total abstinence is easier than perfect moderation
+2Gee, I feel kind of LIGHT in the head now,knowing I can't make my satellite dish PAYMENTS!