Tooltips for background items

[smee]

Right now tooltips only work for box and range items, due to the commented lines in BackgroundItem.js: Background items are ignored in mouse events.

There was a discussion in the archived fork almende/vis with a potential workaround here. Is there interest in merging a PR implementing this?

[pthomson]

Yes please. I am currently using non-minified Peer bundles just so that I can uncomment the line and get tooltips attached on a timeline that only uses background items (contiguous blocks of various colors). Kind of silly how the code goes through the whole process of building the tooltip for the background item, and then just does not add it. Seems like a rather senseless limitation. Thank you for raising this issue @smee

[Bonnev]

Hi guys. Following @smee 's link and poking around in the code, I made it possible to have this workaround without using the non-minified version: https://jsfiddle.net/Piggov/f87jcvtw/20/ it overrides the three event handlers with the changes. You just need to fiddle around with the first four lines as the different variants of the code (esm, umd, minified or not, etc.) define it a bit differently.

(You can check also how I use it for React.js + Node.js (nw.js): link)

Meanwhile, we are all still waiting for the fix 😄(and yes, I call it a fix because I think it's rather a bug, not an enhancement)

[isokrates]

Thanks for coming up with this great workaround! It doesn't seem to format HTML, though... is there a way to get that functionality back?

[Bonnev]

@isokrates I see in the source that the title field is being set to the popup with this.popup.setText(title) and looking at the source of popup.setText, it checks if title is of type Element and if so, adds it as HTML.

This means you can just pass an Element in the title field: check this

[isokrates]

Thanks for such a quick reply! I tried this (https://jsfiddle.net/dt1hfq0z/): at ll. 128–129 I create a <span>, then I include it as the title in l. 147, but the tooltip says [object HTMLSpanElement], rather than rendering. What am I doing wrong?

[smee]

If the element you want to set as the tooltip content is not a string, then innerText will convert it to a string leading to the representation you see. You should use something like

if(typeof title === 'string')
      element.innerText = title;
    else
      element.appendChild(title);```

[Bonnev]

@isokrates You seem to have gotten an older version of my jsfiddle (could be my fault as well). The changes should only be in the code at the bottom. Check this: https://jsfiddle.net/Piggov/nygqed1u/1/

[isokrates]

Sorry for the delay... I was away for a couple of weeks. But this works now—thank you both so much!