如何使用 D3/javascript 同时触发两个不同的工具提示？

Question

I have a d3/js interactive Geo map, where I created a tooltip on a mouseover event over a specific country.

The code that creates the tooltips is:

// create a tooltip
var tooltip = d3.select("#tooltip")
  .style("opacity", 0)
[..]


// create another tooltip
var tooltip2 = d3.select("#tooltip")
  .style("opacity", 0)
  .attr("class", "tooltip")
[..]
 

The code that triggers the tooltip is:

 .on("mouseover", mouseOver1 )    
  .on("mouseleave", mouseLeave )  

where mouseOver1 is defined as:

    d3.selectAll(".topo")
     //   [...]
 
      tooltip
        .style("opacity", 1)
        .style("background-color", 'transparent')
        .html( "<br/><img style='background:transparent; width=' 100 px'; height='"+(d.total)/10+"px' src='image.png'>")

//        .style([..])
 
  } 

What i would like to do is to add a second function (mouseOver2) that will trigger a second tooltip, i want both tooltips to appear at the same time.

What i tried:

1. inserting the logic of the second function ( in particular another.html section) inside the first function ---> result: the 2nd.html replaces the 1st one. (but i need both)
2. call two different functions on mouseover eg with a code like this:

.on("mouseover.one", mouseOver1)
.on("mouseover.two", mouseOver2) 

---> result; the tooltip created with the second function (mouseOver2) still replaces the first one, or make the 1st one disappear when the 2nd one is called. (i created two different tooltips so they should be independent from each other)

Answer 1

In JavaScripy you can use addEventListener function to handle more function

Doc: addEventListener()

It's simple usage:

const el = document.getElementById('outside');

el.addEventListener("mouseenter", () =>{
    functionFireToolTipOne();
    functionFireToolTipTwo()
  };
);