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:
.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)
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()
};
);