• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

251
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:

  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 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)

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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()
  };
);
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error