CODEWITHSUNDEEP
fancytreejbox
MBaas
MBaas

Reputation: 7530

how to respond to user expanding a node?

I guess the answer is expand - but the expand-event does not seem to fire.

But let me start at the beginning: I have a nice tree and I'd like to use jBox to display information about certain nodes. I noticed that this worked only for nodes that were visible when the tree was created, but it did not work for nodes under collapsed nodes. So I thought I could use expandand assign an event-handler that would call jBoxto create the tooltips. But it did not work. I added a console.log to the `expand-handler and noticed that it never logged. Am I specifying it incorrectly?

Fiddle here. The "SD"-Node has some items in it which should have a tooltip attached to the (i)-icon.

Upvotes: 0

Views: 52

Answers (1)

Stephan Wagner
Stephan Wagner

Reputation: 990

It doesn't fire because you are passing in a string:

"expand": "function(event, data) {...}"

You need to remove the double quotes, so that it is a function:

"expand": function(event, data) {...}

See updated fiddle: http://jsfiddle.net/pgh52m4w/3/

The same counts for the event "dblclick". Remove the double quotes there too.

Also, it is encouraged to use the .attach() method when attaching jBox. The attach method will check if this jBox was already attached to the element and only attaches it if it wasn't.

See the updated fiddle. I created a variable for the tooltip and reattach it in the expand event:

$(function() {
  var treei = $("#tree").fancytree({
    expand: function () {
      myTooltip && myTooltip.attach(); // Reattaching Tooltip
    }
    // ...
  });
  var myTooltip = new jBox("Tooltip", { // get tooltips showing
    attach: '[data-jbox-content]',
    getTitle: "data-jbox-title",
    getContent: "data-jbox-content"
  });
});

Upvotes: 1

Related Questions