feat: support newlines in tooltips by basbroek · Pull Request #9647 · vega/vega-lite

basbroek · 2025-07-24T15:13:35Z

PR Description

This PR adds support for rendering newlines in tooltips and potentially closes #7564.

A new function has been added in the tooltip encoder that transforms tooltip values that are arrays into strings joined by newline characters. This allows multi-line tooltip content to be displayed correctly.

To support this behavior visually, a small CSS update is required in the vega-tooltip package — see the accompanying PR in that repository.

Example

With the new code, this example spec (open in editor) will render a tooltip like this:

basbroek · 2025-07-25T09:01:30Z

@domoritz: working on this issue I noticed signal strings created by Vega-Lite all use escaped double quotes \" while single quotes would also be valid and might enhance readability of the compiled Vega specs. For instance

"signal": "\"a: \" + (isValid(datum[\"a\"]) ? datum[\"a\"] : \"\"+datum[\"a\"]) + \"; b: \" + (format(datum[\"b\"], \"\"))"

would become

"signal": "'a: ' + (isValid(datum['a']) ? datum['a'] : ''+datum['a']) + '; b: ' + (format(datum['b'], ''))"

Is there a reason for not using single quotes? Maybe I'm missing some edge-cases?

domoritz · 2025-07-26T09:24:53Z

At least one reason would be that " are slightly easier to use with the default ' in the Vega-Lite code base. I suggested changing to " in #5361. We could do it but should merge any big pending prs first. I'm supportive of it if you would like to tackle the task (in a separate pull request of course).

basbroek · 2025-07-27T09:05:21Z

@domoritz I'll be offline the next two weeks, but when I'm back, I would be happy to dig into the formatting of signal strings in a future pull request (after I have finished working on the backgrounds for text marks).

domoritz

I made a copy in #9678 because this pull request has different images than the CI would output. Please use a PAT and try whether the CI builds the examples rather than manually building them.

domoritz · 2025-09-10T04:30:42Z

src/compile/mark/encode/tooltip.ts

+  expr: 'datum' | 'datum.datum' = 'datum',
+): VgValueRef {
+  // tooltip fields with a format property are no strings
+  const fieldDefWithFormat = channelDef as {field: string; type: string; format: string};


how do you know that the type here is {field: string; type: string; format: string}?

I'm still wrestling a bit with the elaborate type system in this repo 😅
I have replaced the cast with a type guard.

domoritz · 2025-09-10T04:31:18Z

src/compile/mark/encode/tooltip.ts

+  if (fieldDefWithFormat?.type === 'nominal' && !fieldDefWithFormat.format) {
+    const fieldString = `datum["${fieldDefWithFormat.field}"]`;
+    return {
+      signal: `isValid(${fieldString}) ? isArray(${fieldString}) ? join(${fieldString}, '\\n') : ${fieldString} : ""+${fieldString}`,


Why do we need to convert invalid values to strings? Can we reuse logic here?

This is in line with the way formatSignalRef handles nominal fields:

return {signal: `isValid(${field}) ? ${field} : ""+${field}`};

I think to render null, undefined, or NaN as strings in tooltips and area descriptions?

basbroek · 2025-09-10T12:54:26Z

Please use a PAT and try whether the CI builds the examples rather than manually building them.

I'm sorry for that. I did add an action secret and tried to trigger the CI by including [SVG] in the last commit message, but that didn't work. Hence I built the examples locally to pass all CI tests. Won't happen again.

domoritz · 2025-09-10T15:06:17Z

All good. Our setup for external forks is a bit wonky because of some restrictions GitHub actions had (have?). I often make an internal copy to get the build to work correctly.

domoritz · 2025-09-10T15:07:52Z

Is it true that if there is a format, the tooltip is not a string? It's a string afterwards but I guess it's not likely to be a multi line string, right?

basbroek · 2025-09-11T15:44:52Z

Is it true that if there is a format, the tooltip is not a string? It's a string afterwards but I guess it's not likely to be a multi line string, right?

The comment was unclear, I have removed it. The logic is:

Only tooltip fields with type nominal or ordinal have to be formatted as a vg-signal that checks for arrays with multi-line strings
If the spec doesn't contain an explicit type for a temporal or quantitative tooltip field, it gets the default type nominal earlier in compiling
If the tooltip field has type nominal but also a format specifier, it should fall thru so it can be formatted as a vg-signal that includes the format (e.g. "signal": \"count\": format(datum[\"count\"], \",\")

I hope this answers your question?

domoritz

Looks good. Let's get the tests to pass and I can merge.

domoritz · 2025-09-11T18:08:43Z

src/compile/mark/encode/tooltip.ts

 ): VgValueRef {
-  // tooltip fields that are not nominal or have a format property are no strings
-  if (isFieldDef(channelDef) && 'type' in channelDef && channelDef.type === 'nominal' && !channelDef.format) {
+  if (isFieldDef(channelDef) && 'type' in channelDef && isDiscrete(channelDef.type) && !channelDef.format) {


isn't 'type' in channelDef always true?

domoritz · 2025-09-17T13:31:00Z

I merged your changes into #9678.

domoritz · 2025-09-17T13:31:39Z

We should make you a maintainer. Would you like to (https://github.com/vega/.github/blob/main/project-docs/MAINTAINERS.md)?

Internal version of #9647 --------- Co-authored-by: Bas Broekhuizen <bas.broekhuizen@gmail.com> Co-authored-by: GitHub Actions Bot <vega-actions-bot@users.noreply.github.com>

domoritz · 2025-09-17T13:56:03Z

Thank you. Merged in #9678

basbroek · 2025-09-18T08:50:29Z

@domoritz Thanks for reviewing and merging! If you have time, maybe you can have a look at the corresponding PR in vega-tooltip that is necessary to render the newlines in the tooltip.

Transform tooltip arrays to strings and newlines

9d6ff49

basbroek requested a review from a team as a code owner July 24, 2025 15:13

basbroek mentioned this pull request Jul 24, 2025

feat: Support newlines vega/vega-tooltip#1075

Merged

basbroek marked this pull request as draft July 24, 2025 18:13

basbroek added 4 commits July 25, 2025 09:59

Replace newlines with spaces in aria description

f7a8354

Fix layers test

9c1f523

Fix typo, trigger CI build [SVG]

7af9382

Update examples

b090040

basbroek marked this pull request as ready for review July 25, 2025 08:51

domoritz mentioned this pull request Sep 10, 2025

feat: support newlines in tooltips #9678

Merged

domoritz reviewed Sep 10, 2025

View reviewed changes

Add type guard

1f8159a

Check for both nominal and ordinal types

c446325

domoritz approved these changes Sep 11, 2025

View reviewed changes

basbroek added 2 commits September 12, 2025 09:11

Refine type guard

63b6a46

Update test

cf1c1a5

domoritz closed this Sep 17, 2025

Uh oh!

Conversation

basbroek commented Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Description

Example

Uh oh!

basbroek commented Jul 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

domoritz commented Jul 26, 2025

Uh oh!

basbroek commented Jul 27, 2025

Uh oh!

domoritz left a comment

Choose a reason for hiding this comment

Uh oh!

domoritz Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

basbroek Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

domoritz Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

basbroek Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

basbroek commented Sep 10, 2025

Uh oh!

domoritz commented Sep 10, 2025

Uh oh!

domoritz commented Sep 10, 2025

Uh oh!

basbroek commented Sep 11, 2025

Uh oh!

domoritz left a comment

Choose a reason for hiding this comment

Uh oh!

domoritz Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

domoritz commented Sep 17, 2025

Uh oh!

domoritz commented Sep 17, 2025

Uh oh!

domoritz commented Sep 17, 2025

Uh oh!

basbroek commented Sep 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

basbroek commented Jul 24, 2025 •

edited

Loading

basbroek commented Jul 25, 2025 •

edited

Loading