How to use the vega-tooltip.vega function in vega-tooltip

//   "encoding": {
    //     "x": {"field": "a", "type": "quantitative"},
    //     "y": {"field": "b", "type": "quantitative"}
    //   }
    // };
    const {logger} = this.props;
    const vlSpec = this.props.spec;
    try {
      const spec = vl.compile(vlSpec, logger).spec;
      const runtime = vega.parse(spec, vlSpec.config);
      this.view = new vega.View(runtime)
        .logLevel(vega.Warn)
        .initialize(this.refs[CHART_REF] as any)
        .renderer(this.props.renderer || 'canvas')
        .hover();
      vegaTooltip.vega(this.view);
      this.bindData();
    } catch (err) {
      logger.error(err);
    }
  }

if (this.props.width) {
        if (typeof this.props.width === 'function') {
          vlSpec.width = this.props.width(dimension, this.state.data);
        } else {
          vlSpec.width = this.props.width;
        }
      }
      const spec = vl.compile(vlSpec).spec;
      const runtime = vega.parse(spec);
      this.view = new vega.View(runtime)
        .logLevel(vega.Warn)
        .initialize(el)
        .renderer('svg')
        .hover();
      if (this.props.tooltipOptions && Object.keys(this.props.tooltipOptions).length) {
        vegaTooltip.vega(this.view, this.props.tooltipOptions);
      } else {
        vegaTooltip.vega(this.view);
      }
      this.bindData();
    } catch (err) {
      console.log('ERROR: Failed to compile vega spec ', err);
    }
  };

onHistogramViewAvailable(view) {
        this.view = view;
        const {binDuration} = this.state.bins;
        const options = {showAllFields: false,
                         fields: [{field: 'count'}, {field: 'relStartTime', title: `from`}],
                         colorTheme: 'dark'}

        VegaTooltip.vega(view, options);
    }

this.vega_json = spec;
        this.vega_json.autosize = {"type": "fit", "resize": true, "contains": "padding"};

        if(this.vega_json["metadata"] != null){
            if(this.vega_json["metadata"]["bubbleOpts"] != null){
                this.bubbleOpts = this.vega_json["metadata"]["bubbleOpts"];
            }
        }

        this.vegaLoading = true;
        this.vegaView = new vega.View(vega.parse(this.vega_json), {'renderer': 'svg'})
                                .initialize(this.vega_container)
                                .hover()
                                .run();
        this.vegaLoading = false;
        vegaTooltip.vega(this.vegaView, this.bubbleOpts);
        
        if(window.navigator.platform === 'MacIntel'){
            window.webkit.messageHandlers["scriptHandler"].postMessage({status: 'ready'});
        }
    }

runtime = vega.parse(props.vegaSpec);
    view = new vega.View(runtime)
      .logLevel(vega.Warn)
      .initialize(this.refs.chart)
      .renderer(props.renderer)

    if (props.mode === MODES.Vega) {
      view.hover()
    }

    view.run();

    this.refs.chart.style.width = 'auto';

    if (this.props.tooltip) {
      vegaTooltip.vega(view);
    }

    window.VEGA_DEBUG.view = view;
  }

this.vega_json = spec;
        this.vega_json.autosize = {"type": "fit", "resize": true, "contains": "padding"};

        if(this.vega_json["metadata"] != null){
            if(this.vega_json["metadata"]["bubbleOpts"] != null){
                this.bubbleOpts = this.vega_json["metadata"]["bubbleOpts"];
            }
        }

        this.vegaLoading = true;
        this.vegaView = new vega.View(vega.parse(this.vega_json), {'renderer': 'svg'})
                                .initialize(this.vega_container)
                                .hover()
                                .run();
        this.vegaLoading = false;
        vegaTooltip.vega(this.vegaView, this.bubbleOpts);

        if(window.navigator.platform === 'MacIntel' && !window.tcvizBrowserMode){
            window.webkit.messageHandlers["scriptHandler"].postMessage({status: 'ready'});
        }
    }