Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
WillyTadema
Contributor
Contributor

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

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?

 

 

Labels (4)
1 Reply
Brett_Bleess
Former Employee
Former Employee

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

To help users find verified answers, please do not forget to use the "Accept as Solution" button on any post(s) that helped you resolve your problem or question.
I now work a compressed schedule, Tuesday, Wednesday and Thursday, so those will be the days I will reply to any follow-up posts.