Question

0

64

Views

How can i trigger two different tooltips at the same time using D3/javascript?

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:

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)
call two different functions on mouseover e.g. 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)

3 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-07-04T18:07:31.722Z

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