Network - Element Type Tooltip failing

[Charlie-UK]

Hi,

I've been working with vis network charts and have run into an issue trying to use an element as a tooltip (i.e. options.nodes.title = ).

This should show the issue occurring JsBin Example, I've attached a HTML file as an example as well as the console output seems different in JsBin (index.zip).

There seems to be a problem with the accepted options for nodes.title not being configured to accept dom elements which results in console error:

Invalid type received for "title". Expected: string, undefined. Received [dom] "[object HTMLDivElement]"

Problem value found at: 
options = {
  nodes: {
    title
  }
}

I fixed this locally by adding the "dom" type to the accepted types for nodes.title in "lib/network/options.js":

title: { string, dom, 'undefined': 'undefined' },

Secondly I encountered an issue on hovering over a node to display the tooltip which resulted in the console error:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at t.value (vis.min.js:42)
    at t.value (vis.min.js:42)
    at vis.min.js:42 

Having followed the process through I believe this was a result of an issue in the "bridgeObject" function in "/lib/util.js". It seems like the following line is possibly inappropriate for Element type objects:

objectTo = Object.create(referenceObject)

I altered the function locally to be as below which seems to have fixed that issue:

exports.bridgeObject = function (referenceObject) {
  if (typeof referenceObject == "object") {
    var objectTo;
    if (referenceObject instanceof Element) {
      objectTo = referenceObject;
    } else {
      objectTo = Object.create(referenceObject);
      for (var i in referenceObject) {
        if (referenceObject.hasOwnProperty(i)) {
          if (typeof referenceObject[i] == "object") {
            objectTo[i] = exports.bridgeObject(referenceObject[i]);
          }
        }
      }
    }
    return objectTo;
  }
  else {
    return null;
  }
};

I hope this is of some help, I don't know you code well so don't know if these changes are appropriate or if they might cause issues elsewhere. It could easily be that I am using the framework incorrectly in which case please let me know.

Great library btw, I have had good results from using it in a very short period of time.

[Tooa]

The documentation states:

When nodes or edges have a defined 'title' field, this can be shown as a pop-up tooltip. The tooltip itself is an HTML element that can be fully styled using CSS.

So the following works out of the box:

var options = {
      nodes: {
        title: '<div id="tooltip">I\'m a tooltip</div>'
      }
}

At the moment, the title does not support dom elements. Do you see any benefit of passing a dom element as title?

[Charlie-UK]

Hi, I my case my the benefit is that I am able to reuse a tooltip component common to the overall application. It wouldn't be a great problem if I needed to recreate the tooltip component as a HTML string but it's obviously a cleaner solution if I can reuse existing software.

[mojoaxel]

At the moment, the title does not support dom elements. Do you see any benefit of passing a dom element as title?

The docs say "String or Element". Looks like a bug to me!

[xyx2011]

facing a issue where I pass title as string in eachnode and nothing happened when hover it over on these node. Is this issue fixed in newest release?

Thanks!

[wimrijnders]

@Charlie-UK 👍 I got around to looking at this issue in-depth, and I must say your analysis is bloody excellent. Your suggestions are perfect and will hereby be PR'd.

Thanks a million for this excellent work!

[wimrijnders]

@xyx2011 Wrt. to your question: I'm submitting a fix for the current issue, but I can't tell if that fixes your question. Would you mind making a separate issue for it, preferably with an example in jsfiddle or comparable?