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é:
.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í)
En JavaScripy puede usar la función addEventListener para manejar más funciones
Documento: addEventListener()
Es de uso simple:
const el = document.getElementById('outside'); el.addEventListener("mouseenter", () =>{ functionFireToolTipOne(); functionFireToolTipTwo() }; );