only truncate the long visible text, not the title (observablehq#1913)

chaichontat · Jan 14, 2024 · 0013dbb · 0013dbb
1 parent 4954cdf
commit 0013dbb
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git 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
diff --git 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,