Add an 'onHover' event to the timeline

[aaronpcz]

Hi,

I'm very impressed with this library and have used it for 2 projects.

I've developed very easily a popup based on that you allowed HTML to be added in as content.

I'd like to know if you have any plans to make popups available to bind to hover over events.

Thanks,
Aaron

[AlexDM0]

Hi Aaron, I'm not exactly sure what you mean. If I'm understanding you correctly, you have a div that is populated with the content of a node you hover over that you want to show when the hoverNode event is called?

Regards,

Alex

[AlexDM0]

Alternatively, we have a pop-up functionality in the network as well. See http://visjs.org/examples/network/12_scalable_images.html and mouse over one of the images.

Regards,

Alex

[aaronpcz]

Yes you are correct.

I don't think the hoverNode event is in the documentation.

Thanks for the quick reply. Will test when I'm back in work tomorrow
On 22 Jul 2014 17:10, "Alex" notifications@github.com wrote:

Alternatively, we have a pop-up functionality in the network as well. See
http://visjs.org/examples/network/12_scalable_images.html and mouse over
one of the images.

Regards,

Alex

—
Reply to this email directly or view it on GitHub
#226 (comment).

[AlexDM0]

Hi Aaron,

Yes it is :) http://visjs.org/docs/network.html#Events

Regards,

Alex

[aaronpcz]

My mistake.

I assume this won't work with Timeline ?
On 22 Jul 2014 17:27, "Alex" notifications@github.com wrote:

Hi Aaron,

Yes it is :) http://visjs.org/docs/network.html#Events

Regards,

Alex

—
Reply to this email directly or view it on GitHub
#226 (comment).

[AlexDM0]

Hi Aaron,

I'm sorry, I thought you were referring to the network module. I'll
refer to @josdejong for the timeline.

Regards,

Alex

[josdejong]

These events are indeed not yet available in the Timeline but will be added in the future. We may also add a built-in popup solution similar to the current title property, but supporting HTML contents.

[aaronpcz]

I've resolved the issue for the timeline module using some CSS.

Thanks for the support

[josdejong]

Ah, that sounds neat. I suppose you're using some css tooltip now?

[carueda]

We may also add a built-in popup solution similar to the current title property, but supporting HTML contents.

👍

[RichardJohnn]

I was able to create a css tooltip, but I noticed the tooltip doesn't render on the event when zoomed out. I think it might be related to this issue where the title doesn't stay on the event.

@aaronpcz could you share your implementation?

[aaronpcz]

Sorry my solution is a work project and it's the weekend. My memory isn't
serving me well!

I have a feeling it is also a css tool tip. I'll dig out the
implementation on Tuesday(bank holiday on Monday).

On Fri, Aug 22, 2014 at 5:54 PM, RichardJohnn notifications@github.com
wrote:

I was able to create a css tooltip, but I noticed the tooltip doesn't
render on the event when zoomed out. I think it might be related to this
issue #243 where the title doesn't
stay on the event.

@aaronpcz https://github.com/aaronpcz could you share your
implementation?

—
Reply to this email directly or view it on GitHub
#226 (comment).

[iphar]

FYI I solved html tooltips for items by using http://qtip2.com/ which works nice!

[AlexDM0]

Hi,

Over the last year a lot of feature requests have been made. We have just introduced our new website which has a list of the requested features. We have placed this request on that list.

The list can be found here:
http://visjs.org/featureRequests.html

An explaination of the new system can be found here:
http://visjs.org/blog.html#New\ website\ for\ vis.js!

I would like to stress that this does not mean we abandon this request. Discussion here will continue if needed on this feature but we will close it to keep our Github issue page more of a bug-todo list.

Future feature requests will still be made here and then added to the website by us.

Regards,

Alex

[aaronpcz]

When creating the ItemData, you can include tool tip content wrapped within a div with the rest of the HTML content. Including a class attribute named appropriately (example tooltip).

Using css this can just be a standard tooltip with the following css.

.tooltip {
display: none;
position: fixed;
}

.vis.timeline .item:hover .tooltip {
display: block;
z-index: 1235;
}

I checked out the project and I don't think this is worth a code change but you could include it in your documentation ?

[iphar]

aaronpcz, I tried your suggestion. it works perfectly at first sight but has two drawbacks:

1. page scrolling breaks the tooltip position. After I scroll my page (because timelines height is bigger than the page) the tooltips are positioned too low (offset from scrolling). This makes them unusable.
2. minor point: performance with fixed positioned tooltips makes Firefox Browser very slow.

Currently I don't have a solution, as I also didn't have success with proprietary libs like qtip.

[sujoy-roy]

I'm struggling to get any hover tooltips working. Would someone be able to provide an example of usage to put tooltip content into the dataset, please?

[VMannello]

Just wanted to add to this conversation. I needed truncated items on the timeline to expand on hover. I used this jQuery which could easily implement a Tool Tip, or anything else.

var orgWidth;
var orgZ;
$(document).on("mouseenter mouseleave", ".vis-item", function(e) {
       if (e.type === "mouseenter") {
             orgWidth = $(this).width();
             orgZ = $(this).css('zIndex');
             $(this).css('zIndex',99999);
             if ($(this).width() < $(this).children().first().children().first().width()) {
                    $(this).width($(this).children().first().children().first().width() + 9);
             }
       } else {
            $(this).width(orgWidth);
            $(this).css('zIndex',orgZ);
            }
        });

[TheAdail]

I'm using Angular.js and solved this by creating a global function setTooltip, where selector is the jQuery selector for the elements, tooltipAttribute is the property name you want to copy from the item, and generations is the number of parents above the item where you want to set the tooltip.

function setTooltip(selector, tooltipAttribute, generations) {
    var items = angular.element(selector);
    angular.forEach(items, function(item, key) {
        var parent = item;
        for(var g = 0; g < generations; g++)
            parent = parent.parentElement;
        parent.title = item[tooltipAttribute];
    });
}

Then after creating the items, I call it like this:

$timeout(function() {
    setTooltip('.vis-item-content', 'innerText', 2);
}, 0);

I am also using FullCalendar.io and need the exact same thing, so this function serves me twice:

$timeout(function() {
    setTooltip('.fc-title', 'innerText', 2);
}, 0);

Hope it helps someone else... Enjoy! :)

[pdanielkoe]

I wanted to show the exact time when the mouse hover on top of the timeline ? is there any possible way to do it ? thanks in advanced

[mojoaxel]

Reopening as Feature-Request issue (see #2114).
Everybody: Please feel free to implement this!

[mojoaxel]

@yotamberk fixed this with #2473