default to ellipsis for key/value pairs

Author: Fil

docs/marks/tip.md

@@ -97,7 +97,7 @@ Plot.plot({
 ```
 :::
 
-If no **title** channel is supplied, the tip mark displays all channel values. You can supply additional name-value pairs by registering extra channels using the **channels** mark option. In the scatterplot of Olympic athletes below, you can hover to see the *name* and *sport* of each athlete. This is helpful for noticing patterns — tall basketball players, giant weightlifters and judoka, diminutive gymnasts — and for seeing individuals.
+If no **title** channel is supplied, the tip mark displays all channel values as name-value pairs, clipping long values with an ellipsis. Set **textOverflow** to *null* to disable clipping, or use another [text overflow](../marks/text.md) mode such as *ellipsis-middle*. You can supply additional name-value pairs by registering extra channels using the **channels** mark option. In the scatterplot of Olympic athletes below, you can hover to see the *name* and *sport* of each athlete. This is helpful for noticing patterns — tall basketball players, giant weightlifters and judoka, diminutive gymnasts — and for seeing individuals.
 
 :::plot defer https://observablehq.com/@observablehq/plot-tips-additional-channels
 ```js
@@ -253,7 +253,7 @@ These [standard text options](./text.md#text-options) control the display of tex
 - **textAnchor** - the [text anchor](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor) for horizontal position; *start*, *end*, or *middle*
 - **lineHeight** - the line height in ems; defaults to 1
 - **lineWidth** - the line width in ems, for wrapping; defaults to 20
-- **textOverflow** - how to wrap or clip lines longer than the specified line width; defaults to *ellipsis* <VersionBadge pr="2322" />
+- **textOverflow** - how to wrap or clip lines longer than the specified line width; defaults to *ellipsis* for name-value tips <VersionBadge pr="2322" />
 
 ## tip(*data*, *options*) {#tip}
 

src/marks/text.js

@@ -121,7 +121,7 @@ export class Text extends Mark {
 
 export function maybeTextOverflow(textOverflow) {
   return textOverflow == null
-    ? null
+    ? textOverflow
     : keyword(textOverflow, "textOverflow", [
         "clip", // shorthand for clip-end
         "ellipsis", // … ellipsis-end

src/marks/tip.js

@@ -46,7 +46,7 @@ export class Tip extends Mark {
       frameAnchor,
       format,
       textAnchor = "start",
-      textOverflow = "ellipsis",
+      textOverflow,
       textPadding = 8,
       title,
       pointerSize = 12,
@@ -91,7 +91,8 @@ export class Tip extends Mark {
     const mark = this;
     const {x, y, fx, fy} = scales;
     const {ownerSVGElement: svg, document} = context;
-    const {anchor, monospace, lineHeight, lineWidth, textOverflow} = this;
+    const {anchor, monospace, lineHeight, lineWidth} = this;
+    let {textOverflow} = this;
     const {textPadding: r, pointerSize: m, pathFilter} = this;
     const {marginTop, marginLeft} = dimensions;
 
@@ -126,6 +127,7 @@ export class Tip extends Mark {
     } else {
       sources = getSourceChannels.call(this, values.channels, scales);
       format = formatChannels;
+      if (textOverflow === undefined) textOverflow = "ellipsis-end";
     }
 
     // Format the tip text, skipping any nulls.