show tooltip when function is called in d3 js

Question

I try to show the previously generated tooltip when the element is selected in a dropdown list. I am using d3 js version 3 and d3-tip.

    function initialize_map(id){
      // select map
      var svg = d3.select(id).append("svg")
        .attr("width", map_width)
        .attr("height", map_height)
    
      // add tooltip
      var tooltip = d3.tip()
                  .attr('class', 'd3-tip')
                  .attr("id", "tool-" + id)
                  .offset([-5, 0])
                  .html(d => get_location_info(d, "tool-" + id))
    
      // display the municipalities
      svg.append("g")
        .attr("class", "municipalities")
        .selectAll("path")
        .data(municipalities)
        .enter()
        .append("path")
        .attr("id", function(d){ return d.GEO_ID })
        .attr("d", path)
        .on('mouseover', tooltip.show)
        .on('mouseout', tooltip.hide)

svg.call(tooltip)

}

function showSelectedMunic(munic_info_id){
var tooltip = d3.select('#tool-map1')



  svg = d3.select("#map1")
  svg.selectAll(".municipalities")
  .selectAll("path")
  .filter(function(d) { return d.id == munic_info_id  })
  .call(tooltip.show)
  

}

I can select the correct element when the function showSelectedMunicis called but somehow .call(tooltip.show) does give me the error Uncaught TypeError: callback is undefined. When I would change this code to .on('mouseout', tooltip.show)it would work. How do I have to modify it in order to show the tooltip?

Answer 1

After some experimenting, I have a workaround. I just manually trigger the event mouseover:

function changeSelectedMunic(munic_info_id){

var evt = new MouseEvent("mouseover");

svg = d3.select("#map1")

svg.selectAll(".municipalities")
  .selectAll("path")
  .filter(function(d) { return d.id == munic_info_id  })
  .node().dispatchEvent(evt);

}