vega-tooltip, in its "old" incarnation

The vega-tooltip JS library is now part of vega-embed; I write these words ignorant of the "new" way of doing things. I am writing this do document the behavior of the "old" way of doing things, so that I could refer to it if I need to.

Using the "old" way, there seems to be four operating modes for tooltips, as shown in these tooltip specifications.

None

{
  showAllFields: false
}

Encoding

{
  showAllFields: null
}

This seemed a good way to get a quick, useful tooptip - showing only the variables included in the encoding.

All

{
  showAllFields: true
}

Custom

{
  showAllFields: false,
  fields: [
    {field: "Name"},
    {field: "Origin"},
    {field: "Miles_per_Gallon", title: "MPG"},
    {field: "Horsepower"}
  ]
}

Wishlist for tooltips

This may already be in place, but I think it would be useful to be able to specify that the tooltip respect the order of the fields array. If we can specify that a field can be a value or the name of a variable (I think I read something about that), then we could image a fileld have a value of <hr>, giving us a way to introduce some formatting.

<!DOCTYPE html>
<html>
<head>
  <title>Embedding Vega-Lite</title>
  <script src="https://cdn.jsdelivr.net/npm/vega@3.2.1"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@2.3.1"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@3.2.0"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-tooltip@0.7.0"></script>
  <link href="https://cdn.jsdelivr.net/npm/vega-tooltip@0.7.0/build/vega-tooltip.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel = "stylesheet">
</head>
<body>

<label for="tooltip-choice">Tooltip variables</label>
  <select id="tooltip-choice">
    <option selected="selected" value = "none">None</option>
    <option value = "encoding">Encoding</option>
    <option value = "all">All</option>
    <option value = "custom">Custom</option>
  </select>

var embed_spec = {"actions": false};

var tooltip_spec = {
      "showAllFields": null,
      "delay": 100
    };

// function to return a tooltip-spec, given a choice
    var get_tooltip_spec = function(choice) {

spec_choice = {
        none: {
          showAllFields: false
        },
        all: {
          showAllFields: true
        },
        encoding: {
          showAllFields: null
        },
        custom: {
          showAllFields: false,
          fields: [
            {field: "Name"},
            {field: "Origin"},
            {field: "Miles_per_Gallon", title: "MPG"},
            {field: "Horsepower"}
          ]
        }
      };

return spec_choice[choice];
    }

// function to render the chart, given a tooltip-spec
    var render = function(tooltip_spec) {

vegaEmbed("#vis", chart_spec, embed_spec).then(function(result) {
        // access view as result.view
        vegaTooltip.vegaLite(result.view, chart_spec, tooltip_spec);
      }).catch(console.error);
    };

//  render chart
    render(get_tooltip_spec($("#tooltip-choice").val()));

$(document).ready(function() {
      // when the tooltip-choice changes,
      //  render the chart using the "new" tooltip-spec
      $("#tooltip-choice").change(function(){
        render(get_tooltip_spec($("#tooltip-choice").val()));
      });
    });

</script>
</body>
</html>

https://cdn.jsdelivr.net/npm/vega@3.2.1

https://cdn.jsdelivr.net/npm/vega-lite@2.3.1

https://cdn.jsdelivr.net/npm/vega-embed@3.2.0

https://cdn.jsdelivr.net/npm/vega-tooltip@0.7.0

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js