[Timeline] Added HTML tool-tip support

[lewisjb]

Adding #338

Tested on Chrome version 55.0 and Internet Explorer version 11.576

This change will allow developers to specify a HTML 'title' (hover tool-tip) for timeline chart items.

Tried to keep code changes to a minimum, and implement it similarly to how Network does it.

The only possible issue with this that I can think of is changing the class of the tool-tip from 'vis-network-tooltip' to 'vis-tooltip' (if people were styling their network tooltip).

[yotamberk]

Cool! thank you! Can you add an example?

[lewisjb]

Done @yotamberk.
I also tested it on Firefox and found that the mouseover event doesn't have a plain .x and .y, so I have fixed that aswell.
(https://developer.mozilla.org/en/docs/Web/Events/mouseover)

[yotamberk]

Ok so I've reviewed this and everything seems fine code-wise. The thing is, the position of the tooltip is not very comfortable in my opinions and it would be much better if it was controllable. The second thing is, you call it a tooltip, but you call it with a title in the item options. I find it confusing.

I approve this feature, and I think it should be further developed to have better control of the tooltip position and triggering (the tooltip should be able to be riggered by click too).

[lewisjb]

Thanks @yotamberk!
I have just pushed a change that will fix the odd tool-tip location so that it is next to where the cursor entered the element.
The naming is unfortunate, 'title' is used so that it isn't a breaking change, and is also what is used in Network (the main reference for this implementation).

[yotamberk]

@lewisjb I think there is still something weird with the location... I think I preferred it better the way it was before or with a margin of a few pixels from the item item and not exactly where the mouse is.
There should be further work with setting for the tooltip (e.g. allowing it to follow the mouse position while hovering the item, tooltip position, trigger control... etc.)
What do you think?

[lewisjb]

@yotamberk Regarding the current way versus the previous way, I'd say that the supplied example doesn't do it justice. If the timeline chart was much larger, then I'm certain the current way would look far better (or, more accurately, the previous way would look far worse).

As for following the mouse, I can totally do that. The reason I went with it saying at it's initial location is because that is how Google Chart's Timeline does it. It might be beneficial to add it as an option to Timeline, something like tooltipFollowMouse. Thoughts?

[yotamberk]

Okay I can see what you mean. The current way is good for now. If you can add that option that would be great =)

[mojoaxel]

Really nice addition! I aspeacially like that you reused the Popup-component. Perfect! Thanks!

[mojoaxel]

Maybe you could add also an example for "HTML element".

[lewisjb]

@mojoaxel Do you mean adding an example that uses http://visjs.org/examples/timeline/items/htmlContents.html aswell as a HTML tool-tip?

[yotamberk]

I think he means a seperate example with an html tooltip

[lewisjb]

@yotamberk I'm sorry, I don't seem to understand... These examples have HTML tool-tips (except for the first one, as it shows you don't need to use HTML)

[yotamberk]

True... maybe change the content of an item to html element and then i think the example is complete

[lewisjb]

@yotamberk I've changed the content of an item to use HTML in the example. However this brought to light a bug.

Moving your mouse around over the HTML item moves the tool-tip weirdly. This is because the 'mouseout' and 'mouseover' events are called on children elements of the item. I personally see this as a bug with Timelines as a whole, not just HTML tool-tips. I would be happy to fix it in this pull request, but I think it might be better to have it as a separate GitHub issue & PR (assuming it is a bug with Timeline and not just HTML tool-tips)

[yotamberk]

@lewisjb Okay I think it can be merged and have the other features and issues we talked about above in later issues (It would be great if you could open these issues).
What do you mean as a problem in

I personally see this as a bug with Timelines as a whole, not just HTML tool-tips.

?

[lewisjb]

@yotamberk Thanks! Will do!

As for why it's a bug with Timelines as a whole, not just HTML tool-tips:
The mouseover/mouseout event is being fired on child elements. In this case it was something like

<div class='vis-item'>
    <h1>HTML</h1>
    Text
</div>

So when you hovered over the <h1> element, there was a new element under the cursor, which fires mouseout, followed by its related mouseover. This is expected; however, all the code handling those events don't care about the specific element, only the 'item' which they are in. (Reference: ItemSet.js:1874 and ItemSet.js:1896)
So tool-tips will be moved, and 'itemover'/'itemout' will be emitted when the cursor is still over the same item. Which, goes against the description of 'itemover'/'itemout' in the docs. If, for some reason this is the intended behavior, then only tool-tips will need to be fixed, and I would recommend updating the docs to reflect this behavior.