Trying to figure out how to highlight the proper bar and put in the tooltip based on mouse position.

spec.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 240,
  "height": 240,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": [
        {
          "name": "Facebook",
          "total": 2,
          "unique": 2
        },
        {
          "name": "Twitter",
          "total": 4,
          "unique": 2
        },
        {
          "name": "visit",
          "total": 143,
          "unique": 72
        },
        {
          "name": "request info",
          "total": 73,
          "unique": 72
        },
        {
          "name": "Apply",
          "total": 72,
          "unique": 72
        },
        {
          "name": "banner",
          "total": 74,
          "unique": 73
        }
      ]
    }
  ],
  "signals": [
    {
      "name": "tooltip",
      "value": {},
      "on": [
        {
          "events": "rect:mouseover",
          "update": "datum"
        },
        {
          "events": "rect:mouseout",
          "update": "{}"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {
        "data": "table",
        "field": "name"
      },
      "range": "width"
    },
    {
      "name": "yscale",
      "type": "linear",
      "domain": {
        "data": "table",
        "field": "total"
      },
      "range": "height",
      "zero": true,
      "nice": true
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {
        "data": "table",
        "field": "name"
      },
      "range": {
        "scheme": "category20"
      }
    }
  ],
  "axes": [
    {
      "orient": "left",
      "scale": "yscale",
      "zindex": 1
    },
    {
      "orient": "bottom",
      "scale": "xscale",
      "zindex": 1
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "name"
          },
          "width": {
            "scale": "xscale",
            "band": 1
          },
          "y": {
            "scale": "yscale",
            "band": 1
          },
          "y2": {
            "scale": "yscale",
            "value": 0
          },
          "fill": {
            "value": "red"
          },
          "fillOpacity": {
            "value": 0
          },
          "zindex": 0
        }
      }
    },
    {
      "type": "rect",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "name"
          },
          "width": {
            "scale": "xscale",
            "band": 1
          },
          "y": {
            "scale": "yscale",
            "field": "total"
          },
          "y2": {
            "scale": "yscale",
            "value": 0
          },
          "fill": {
            "scale": "color",
            "field": "name"
          },
          "fillOpacity": {
            "value": 0.5
          },
          "zindex": 1
        }
      }
    },
    {
      "type": "rect",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "name"
          },
          "width": {
            "scale": "xscale",
            "band": 1
          },
          "y": {
            "scale": "yscale",
            "field": "unique"
          },
          "y2": {
            "scale": "yscale",
            "value": 0
          },
          "fill": {
            "scale": "color",
            "field": "name"
          },
          "zindex": 2
        }
      }
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "align": {
            "value": "center"
          },
          "baseline": {
            "value": "bottom"
          },
          "fill": {
            "value": "#333"
          }
        },
        "update": {
          "x": {
            "scale": "xscale",
            "signal": "tooltip.name",
            "band": 0.5
          },
          "y": {
            "scale": "yscale",
            "signal": "tooltip.total",
            "offset": -2
          },
          "text": {
            "signal": "tooltip&&tooltip.total?\"u\"+tooltip.unique+\" t\"+tooltip.total:\"\""
          },
          "fillOpacity": [
            {
              "test": "datum === tooltip",
              "value": 0
            },
            {
              "value": 1
            }
          ]
        }
      }
    }
  ]
}