Creating tooltip on maps using d3.js

Question

I am expanding this example http://bl.ocks.org/tommyskg/6111032

I am working to add tooltip to point whenever I click on it: I use d3.JS
http://onehackoranother.com/projects/jquery/tipsy/#download

      // Add a circle.
      marker.append("svg:circle")
                        .attr("r", 4.5)
                        .attr("cx", padding)
                        .attr("cy", padding)
                        .on("click",info)


     function info(){
        d3.select(this).tipsy({live: true});
      };

But I am getting this error: Uncaught TypeError: Object [object Array] has no method 'tipsy'

It seems that I am using JQuery two times

How canI cut this conflict ?

Second way :

I though that there is problems with map as the tooltip could be hiding behind map. I made position of tooltip when it displays relative. I coded that manually.

div.tooltip {
  color: #222; 
  background: #fff; 
  padding: .5em; 
  text-shadow: #f5f5f5 0 1px 0;
  border-radius: 2px; 
  box-shadow: 0px 0px 2px 0px #a6a6a6; 
  opacity: 0.9; 
  position: relative;
}

var tooltip = d3.select("#map").append("div")

  function info(){
            tooltip.attr("class", "tooltip");
          };

     marker.append("svg:circle")
                            .attr("r", 4.5)
                            .attr("cx", padding)
                            .attr("cy", padding)
                            .on("click",info)

But I couldn't reach results ? Any ideas to solve this issue ?

score 0 · Accepted Answer · answered Dec 03 '13 at 15:00

0

Problem one

tipsy is a jQuery plugin, so you need to wrap the DOM element as a jQuery object (not a d3 selection) to get access to the tipsy function:

function info () { $(this).tipsy({live: true}); }

Problem two

I suspect that you are appending a div to a svg element. That is not allowed.

Also, I think the tooltips should show up just fine: http://bl.ocks.org/ilyabo/1373263

answered Dec 03 '13 at 15:00

musically_ut

34,028
8
94
106

Thanks 80% working! But I am not seeing the tooltips, I added "console.log("Hello");" in the info function to see if I am calling the function correctly, It's printing on console. It seems that I am getting issues with CSS ! the tooltip could be hiding behind map . Any thoughts – user3047512 Dec 03 '13 at 15:18
Yes ! the tooltips should work find, but there is a small issue, when I click on tooltip, it doens't appear, after moving the mouse and coming back to the point, then it appears. I am using .on("click",info) – user3047512 Dec 03 '13 at 15:34
@user3047512 You want to activate `tipsy` on the all the elements and set `trigger` on them to `manual`: `trigger: 'hover' // how tooltip is triggered - hover | focus | manual`. Then on click, just call `.tipsy({ show: true })` – musically_ut Dec 03 '13 at 15:41

Creating tooltip on maps using d3.js

1 Answers1