Hi Chetan,

Good question and thanks for the detailed steps to replicate.

Admittedly, the data tip position logic is a little wonky. It is more a quick and dirty example on how you can make your own data tips, than a perfect example.

Better logic would take into account the boundaries of the screen (left, right, top, bottom) in relationship to the target element and based on the size of the data tip and the position of it correct its x,y position.

In order to fix this issue we need to modify the x,y arguments being passed into createDataTip() from onMouseOver() in weightedtree_test.js. Take a look at the logic there, and adjust as needed so the tool tip does not disappear off the screen.

At some point I will release a more robust example with better dynamic tool tip positioning, until then,
it would be great if someone from the open source community could write a nice a tool tip position function that did that 🙂

Thanks again for your post.

– Tom

p.s. For your other question in regards to showing the element hierarchy you could use a recursive routine to get that by walking up the d.parent chain and modifying the HTML that goes into the tool tip in the createDataTip() routine. You can use the function below to set “branchKeys” for each element to quickly get the path by passing in setBranchKeys(root,"");

function setBranchKeys(d,key) {
    d.branchKey = d.key;
    if (key) d.branchKey = key + "_" + d.branchKey;
    if (d.values) {
        d.values.forEach(function(c) {
            setBranchKeys(c,d.branchKey);
        })
    }
}