How to add a tooltip to a D3.js based map?

WillyTadema — Mon, 26 Jan 2026 16:26:21 GMT

Hi,

I'm trying to add a very simple map to my QlikView dashboard using D3.js. It is based on this example: https://bl.ocks.org/tiffylou/88f58da4599c9b95232f5c89a6321992

My demo code is located in this GitHub repo: https://github.com/FrieseWoudloper/d3-map-in-qlikview

My question is concerning the tooltip. I tried to add it using this code:

          .on("mouseover", function(d) {    
            tooltip.transition()    
            .duration(200)    
            .style("opacity", .9);    
            tooltip.html(d.properties.statcode)  
            .style("left", (d3.event.pageX) + "px")   
            .style("top", (d3.event.pageY - 28) + "px");  
          })

However, this doesn't work. When I leave out the "left" en "top" style elements, the tooltip shows up in the down left corner from the dashboard object. How do I make them appear top left from the path the user is hovering above?

Willy

UPDATE:

It seems that the location of the tooltip label is relative to the entire dashboard canvas, not to the object window. Is that the cause of my problem? How should I fix this?

Re: How to add a tooltip to a D3.js based map?

Brett_Bleess — Mon, 30 Sep 2019 21:53:17 GMT

Willy, I am not much help, but I have hollered at a coworker to see if they can have a look, may take another day or two, shout if you have any updates on things, otherwise hopefully he can have a look and let you know if he has any ideas for you.

Cheers,
Brett

topic Re: How to add a tooltip to a D3.js based map? in QlikView

How to add a tooltip to a D3.js based map?

Re: How to add a tooltip to a D3.js based map?