From 99c8995169de47e6a30130f550b36cae53287e05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= <fil@rezo.net>
Date: Wed, 1 Nov 2023 18:13:02 +0100
Subject: [PATCH] only truncate the long visible text, not the title (#1913)

---
 src/marks/tip.js            |  2 +-
 test/output/tipLongText.svg | 31 +++++++++++++++++++++++++++++++
 test/plots/tip.ts           |  4 ++++
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 test/output/tipLongText.svg

diff --git a/src/marks/tip.js b/src/marks/tip.js
index 071809aae0..5516e3859a 100644
--- a/src/marks/tip.js
+++ b/src/marks/tip.js
@@ -189,8 +189,8 @@ export class Tip extends Mark {
         const [k] = cut(value, w - widthof(label), widthof, ee);
         if (k >= 0) {
           // value is truncated
-          value = value.slice(0, k).trimEnd() + ellipsis;
           title = value.trim();
+          value = value.slice(0, k).trimEnd() + ellipsis;
         }
       }
       const line = selection.append("tspan").attr("x", 0).attr("dy", `${lineHeight}em`).text("\u200b"); // zwsp for double-click
diff --git a/test/output/tipLongText.svg b/test/output/tipLongText.svg
new file mode 100644
index 0000000000..3fb976b3e7
--- /dev/null
+++ b/test/output/tipLongText.svg
@@ -0,0 +1,31 @@
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    .plot {
+      --plot-background: white;
+      display: block;
+      height: auto;
+      height: intrinsic;
+      max-width: 100%;
+    }
+
+    .plot text,
+    .plot tspan {
+      white-space: pre;
+    }
+  </style>
+  <g aria-label="x-axis tick" fill="none" stroke="currentColor" transform="translate(0.5,0)">
+    <path transform="translate(320,30)" d="M0,0L0,6"></path>
+  </g>
+  <g aria-label="x-axis tick label" transform="translate(0.5,9.5)">
+    <text y="0.71em" transform="translate(320,30)">Long sentence that gets cropped after a certain length</text>
+  </g>
+  <g aria-label="x-axis label" transform="translate(0.5,27.5)">
+    <text transform="translate(320,30)">x</text>
+  </g>
+  <g aria-label="tip" fill="var(--plot-background)" stroke="currentColor" text-anchor="start" transform="translate(0.5,0.5)" visibility="hidden">
+    <g transform="translate(320,15)">
+      <path filter="drop-shadow(0 3px 4px rgba(0,0,0,0.2))"></path>
+      <text fill="currentColor" fill-opacity="1" stroke="none"><tspan x="0" dy="1em">​<tspan font-weight="bold">x</tspan> Long sentence that gets cropped afte…<title>Long sentence that gets cropped after a certain length</title></tspan></text>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/test/plots/tip.ts b/test/plots/tip.ts
index bd7103545a..7f48802072 100644
--- a/test/plots/tip.ts
+++ b/test/plots/tip.ts
@@ -181,6 +181,10 @@ export async function tipLineY() {
   return Plot.lineY(aapl, {x: "Date", y: "Close", tip: true}).plot();
 }
 
+export async function tipLongText() {
+  return Plot.tip([{x: "Long sentence that gets cropped after a certain length"}], {x: "x"}).plot();
+}
+
 export async function tipNewLines() {
   return Plot.plot({
     height: 40,