CODEWITHSUNDEEP
javascriptd3.js
kaounKaoun
kaounKaoun

Reputation: 661

Show a custom tooltip on mouseover of the node (force directed d3 graph)

I have a sample force directed graph something like this: http://next.plnkr.co/edit/C0n0GZvYpppWjx3R?preview

In this graph, right now I can display the node name on mouseover using title attribute of html. But this doens't look promising.

So, I am trying to use here the custom tooltip library from https://vmware.github.io/clarity/documentation/v0.11/tooltips

(My project already has Clarity library)

but somehow it is not working... May be I am not able to figure out how I can append the foolowing html on mouseover:

Lorem

I am fine with some other custom tooltip as well... Can anyone please see this.

What I tried is: Styling: 

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

then on mouseover: 

.on("mouseover", function(d) {
       div.transition()
         .duration(200)
         .style("opacity", .9);
       div.html(formatTime(d.id) + "<br/>" + d.close)
         .style("left", (d3.event.pageX) + "px")
         .style("top", (d3.event.pageY - 28) + "px");
       })

Here is my updated plunkr: http://next.plnkr.co/edit/C0n0GZvYpppWjx3R The tooltip shomehow dowsn't work properly.

Upvotes: 0

Views: 1702

Answers (1)

KEKUATAN
KEKUATAN

Reputation: 948

what are you doing? its working properly, as @Lazar Nikolic say

   div.html(formatTime(d.id) + "<br/>" + d.close)
     .style("left", (d3.event.pageX) + "px")
     .style("top", (d3.event.pageY - 28) + "px");
   })

your data is { id : string, group: number }

there is no field with name close
there is no function with name formatTime

but why is name is formatTime are you trying to convert date with random not a date able string?

if you change to

   div.html(d.id + "<br/>" + d.group)
     .style("left", (d3.event.pageX) + "px")
     .style("top", (d3.event.pageY - 28) + "px");
   })

it will work

custum your mouseover and add mouseout event to hide it after the cursor leave

Upvotes: 1

Related Questions