fit tip

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!

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";

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});
+}