Tengo un mapa geográfico interactivo d3/js, donde creé una información sobre herramientas en un evento de mouseover sobre un país específico.

El código que crea la información sobre herramientas es:

 // 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") [..]

El código que activa la información sobre herramientas es:

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

donde mouseOver1 se define como:

 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([..]) }

Lo que me gustaría hacer es agregar una segunda función (mouseOver2) que activará una segunda información sobre herramientas, quiero que ambas sugerencias aparezcan al mismo tiempo.

Lo que probé:

1. insertando la lógica de la segunda función (en particular, otra sección .html) dentro de la primera función ---> resultado: el segundo .html reemplaza al primero. (pero necesito ambos)
2. llame a dos funciones diferentes al pasar el mouse, por ejemplo, con un código como este:

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

---> resultado; la información sobre herramientas creada con la segunda función (mouseOver2) aún reemplaza a la primera, o hace que la primera desaparezca cuando se llama a la segunda. (Creé dos información sobre herramientas diferentes, por lo que deberían ser independientes entre sí)