Search code examples
javascriptd3.jstooltipmouseover

Tooltip visibility based on condition d3.js

I need to show the tool tip of the nodes of the graph on move hover only when a checkbox value is checked. Else it shouldn't show.

I tried the code as follows. But its not working.

.on('mouseover', function (d) {
  if(document.getElementById("chkEnableDisableNames").checked == true){
    d.show ;
}
else { 
  return null;
}})

jsfiddle

Solution

  • Note: I'm going to be referring to your jsFiddle example as the code in there differs than the snippet you have posted in your question.

    The code has several issues:

    1) You are using a custom function showhidefunc() to regulate the display of the tip. That function is outside of your hover event scope and therefore does not inherit it's local variables, so you need to pass it in by parameter:

    .on('mouseover', function(d) {
  showhidefunc(d); 
}

// ...

function showhidefunc(d) {
  // ...
}

    2) tip.show() is not a property but rather a method which needs to be passed in a parameter with a node to display tip on in order to work:

    tip.show(d);

    Other than that your code looks good.

    Here's your updated (working) fiddle as per above: http://jsfiddle.net/f8R3M/39/