From 5da40d8833c41144c5ead78cf5acbe8768ca6d6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= <fil@rezo.net>
Date: Wed, 18 Mar 2026 12:04:21 +0100
Subject: [PATCH] fixes #2011

---
 src/marks/tip.js                  |  8 ++++-
 test/output/tipAnchorOverflow.svg | 50 +++++++++++++++++++++++++++++++
 test/plots/index.ts               |  1 +
 test/plots/tip-anchor-overflow.ts | 11 +++++++
 4 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 test/output/tipAnchorOverflow.svg
 create mode 100644 test/plots/tip-anchor-overflow.ts

diff --git a/src/marks/tip.js b/src/marks/tip.js
index bfb9d04cb2..3c7e7ac61a 100644
--- a/src/marks/tip.js
+++ b/src/marks/tip.js
@@ -225,9 +225,15 @@ export class Tip extends Mark {
               : fitTop && fitBottom
               ? fitLeft
                 ? "left"
-                : "right"
+                : fitRight
+                ? "right"
+                : "bottom"
               : (fitLeft || fitRight) && (fitTop || fitBottom)
               ? `${fitBottom ? "bottom" : "top"}-${fitLeft ? "left" : "right"}`
+              : fitLeft
+              ? "left"
+              : fitRight
+              ? "right"
               : mark.preferredAnchor;
         }
         const path = this.firstChild; // note: assumes exactly two children!
diff --git a/test/output/tipAnchorOverflow.svg b/test/output/tipAnchorOverflow.svg
new file mode 100644
index 0000000000..f347911520
--- /dev/null
+++ b/test/output/tipAnchorOverflow.svg
@@ -0,0 +1,50 @@
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="100" viewBox="0 0 640 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    :where(.plot) {
+      --plot-background: white;
+      display: block;
+      height: auto;
+      height: intrinsic;
+      max-width: 100%;
+    }
+
+    :where(.plot text),
+    :where(.plot tspan) {
+      white-space: pre;
+    }
+  </style>
+  <g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0.5,0)">
+    <path transform="translate(20,70)" d="M0,0L0,6"></path>
+    <path transform="translate(80,70)" d="M0,0L0,6"></path>
+    <path transform="translate(140,70)" d="M0,0L0,6"></path>
+    <path transform="translate(200,70)" d="M0,0L0,6"></path>
+    <path transform="translate(260,70)" d="M0,0L0,6"></path>
+    <path transform="translate(320,70)" d="M0,0L0,6"></path>
+    <path transform="translate(380,70)" d="M0,0L0,6"></path>
+    <path transform="translate(440,70)" d="M0,0L0,6"></path>
+    <path transform="translate(500,70)" d="M0,0L0,6"></path>
+    <path transform="translate(560,70)" d="M0,0L0,6"></path>
+    <path transform="translate(620,70)" d="M0,0L0,6"></path>
+  </g>
+  <g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)">
+    <text y="0.71em" transform="translate(20,70)">0.0</text>
+    <text y="0.71em" transform="translate(80,70)">0.5</text>
+    <text y="0.71em" transform="translate(140,70)">1.0</text>
+    <text y="0.71em" transform="translate(200,70)">1.5</text>
+    <text y="0.71em" transform="translate(260,70)">2.0</text>
+    <text y="0.71em" transform="translate(320,70)">2.5</text>
+    <text y="0.71em" transform="translate(380,70)">3.0</text>
+    <text y="0.71em" transform="translate(440,70)">3.5</text>
+    <text y="0.71em" transform="translate(500,70)">4.0</text>
+    <text y="0.71em" transform="translate(560,70)">4.5</text>
+    <text y="0.71em" transform="translate(620,70)">5.0</text>
+  </g>
+  <g aria-label="rect">
+    <rect x="20" y="20" width="120" height="50" fill="rgb(35, 23, 27)"></rect>
+    <rect x="140" y="20" width="120" height="50" fill="rgb(38, 188, 225)"></rect>
+    <rect x="260" y="20" width="120" height="50" fill="rgb(149, 251, 81)"></rect>
+    <rect x="380" y="20" width="120" height="50" fill="rgb(255, 130, 29)"></rect>
+    <rect x="500" y="20" width="120" height="50" fill="rgb(144, 12, 0)"></rect>
+  </g>
+  <g aria-label="tip" fill="var(--plot-background)" stroke="currentColor" pointer-events="none" text-anchor="start" transform="translate(0.5,0.5)"></g>
+</svg>
\ No newline at end of file
diff --git a/test/plots/index.ts b/test/plots/index.ts
index 3c019e678f..9f45017f03 100644
--- a/test/plots/index.ts
+++ b/test/plots/index.ts
@@ -312,6 +312,7 @@ export * from "./text-overflow.js";
 export * from "./this-is-just-to-say.js";
 export * from "./tick-format.js";
 export * from "./time-axis.js";
+export * from "./tip-anchor-overflow.js";
 export * from "./tip-format.js";
 export * from "./tip.js";
 export * from "./title.js";
diff --git a/test/plots/tip-anchor-overflow.ts b/test/plots/tip-anchor-overflow.ts
new file mode 100644
index 0000000000..55872e13ba
--- /dev/null
+++ b/test/plots/tip-anchor-overflow.ts
@@ -0,0 +1,11 @@
+import * as Plot from "@observablehq/plot";
+
+export async function tipAnchorOverflow() {
+  return Plot.rectX([1, 1, 1, 1, 1], {
+    x: Plot.identity,
+    fill: Plot.indexOf,
+    title: () =>
+      "Lorem ipsum lorem ipsum lorem ipsum Lorem ipsum lorem ipsum lorem ipsum Lorem ipsum lorem ipsum lorem ipsum",
+    tip: true
+  }).plot({height: 100, marginTop: 20});
+}