QA: Vega-Lite API Tooltip Not Showing in Framework

[jwilber]

I am having trouble figuring out how to get a tooltip to render in framework using the Vega-Lite API (instead of the json spec).

If I use the json spec, e.g. some vega-lite code with mark: { type: "point", tooltip: { content: "data" } }, things work fine.

However, when I use the JavaScript API, no tooltip shows.

Here's are two reproducible example showcasing my issue:

---

1. Using inside a card + resize function:

js-chunk:

```js
import { resize } from "npm:@observablehq/stdlib";
import vl from "observablehq:stdlib/vega-lite";

async function vlresize(
  { autosize = { type: "fit", contains: "padding" }, ...spec },
  { minWidth = 0, maxWidth = Infinity } = {}
) {
  const chart = await vl.render({ spec: { ...spec, width: -1, autosize } });
  return resize((width) => {
    chart.value.width(Math.max(minWidth, Math.min(maxWidth, width)));
    chart.value.run();
    return chart;
  });
}
const df = [
  { city: "Seattle", month: "Apr", precip: 2.68 },
  { city: "Seattle", month: "Aug", precip: 0.87 },
  { city: "New York", month: "Apr", precip: 3.94 },
  { city: "New York", month: "Aug", precip: 4.13 },
  { city: "Chicago", month: "Apr", precip: 3.62 },
  { city: "Chicago", month: "Aug", precip: 3.98 },
];

function scatterWithTooltip(data) {
  const circles = vl
    .markCircle()
    .data(data)
    .encode(
      vl.x().fieldN("city"),
      vl.y().fieldQ("precip"),
      vl.color().fieldN("city"),
      vl.tooltip([vl.fieldN("city"), vl.fieldQ("precip")])
    );

  return vlresize(circles.toObject());
}

div anchor:

  <div class="card">${scatterWithTooltip(df)}</div>

I tried including an import from npm:vega-tooltip, but this didn't solve anything. I also tried experimenting with the content of the tooltip itself.

---

2. I also tried excluding the resize and object conversion in favor of using just the .render() call, and this failed as well:

```js
const circleChart = vl
  .markCircle()
  .data(df)
  .encode(
    vl.x().fieldN("city"),
    vl.y().fieldQ("precip"),
    vl.color().fieldN("city"),
    vl.tooltip([vl.fieldN("city"), vl.fieldQ("precip")])
  )
  .render();

${view(circleChart)}

---

Appreciate any input or help here!

[Fil]

Only the native tooltips are supported in observablehq:stdlib/vega-lite (cf. https://github.com/observablehq/framework/blob/main/src/client/stdlib/vega-lite.js).

To add vega-tooltip, you can do:

import * as vega from "npm:vega";
import * as vegaLite from "npm:vega-lite";
import * as vegaLiteApi from "npm:vega-lite-api";
import * as tooltip from "npm:vega-tooltip";
const vl = vegaLiteApi.register(vega, vegaLite, {
  init: (view) => {
    view.tooltip(new tooltip.Handler().call);

    // another suggestion from https://observablehq.com/@vega/vega-lite-api-v5#vl
    if (view.container()) view.container().style["overflow-x"] = "auto";
  }
});

See https://observablehq.observablehq.cloud/pangea/party/vega-lite-tooltips

Maybe we should add this to the default build, though?

[jwilber]

Thanks so much.

"Maybe we should add this to the default build, though?"
My input here is that, I (maybe wrongly) expected any Observable Notebook to work if ported to framework. (In this case, this vega notebook). (Hence my opening this issue :D )

Not sure if it's worth adding to default, but I think it's worth adding to the Vega page in the documentation. If you go that route, I'm happy to submit a PR.