HTML tooltips

[carueda]

This is about allowing html in token tooltips (complementing what the current 'title' does with only text), and on groups. I know there are some "tooltip" entries already but I was not sure whether any of them is for the timeline component; feel free to mark this as duplicate if that's the case. Thanks.

[josdejong]

Yes, HTML tooltips would be nice. Like Network already has.

[sekys]

I used qTip library for tooltips at Timeline items. I am using Timeline 2.8 version, this code works for me:

 $(document).on("mouseenter", '.timeline-item', function ($e) {
        $(this).qtip({
            overwrite: false,
            hide: 'unfocus',
            show: 'click',
            content: {            }
        });
    });

[josdejong]

Thanks for sharing Lukas.

[carueda]

Yes, thanks for the tip Lukas. I may consider using it, but I'm trying to avoid/minimize extra dependencies, and some of my applications are not relying at all on jQuery.

[ovalek]

I tried bootstrap popover (bootstrap version 3.2.0), and it worked quite well, except that sometimes the popover "arrow" wasn't where it supposed to be. If item was partially hidden, popover it self was nicely visible, but the "arrow" was hidden. There were more problems with the popover "arrow", so now I'm trying qTip2. As for now it only works well on fully visible items. But there are a lot of various options related to positioning, so I hope I'll find out. Do you have any experiences with that?

What I would like to achieve:
If an item is fully visible - show tooltip at bottom center.
If an item is partially hidden from left - show tooltip at bottom right.
If an item is partially hidden from right - show tooltip at bottom left.

[SciGno]

@Skylinex
Do you have an example on how to add a Bootstrap popover to an item?

Thanks

[ovalek]

Well it is not the best solution, but it works. Inside item's content I have span with attribute data-content, which contain future popover content. And then:

jQuery(document).ready(function($) {
// enable timeline, then:
    timeline.on('rangechange', function(properties) {
        $('#timeline .item').popover('destroy');
        attachPopover();
    });
    timeline.on('timechange', function(properties) {
        $('#timeline .item').popover('destroy');
        attachPopover();
    });

    $('a').on('mouseup', function(event) {
        $('#timeline .item').popover('destroy');
        attachPopover();
    });

    var attachPopover = function() {
        $('#timeline .item').popover({
            template: '<div class="popover timelineItemPopover" role="tooltip"><div class="arrow"></div><div class="popover-head"><a href="#" class="btn btn-sm glyphicon glyphicon-remove-circle popover-close"></a><h3 class="popover-title"></h3></div><div class="popover-content"></div></div>',
            placement: 'bottom',
            container: '#timeline',
            viewport: { selector: '#timeline', padding: 20 },
            html: true,
            content: function() {
                return $(this).children('.content').children('span[data-content]').attr('data-content');
            }
        });

    };

    attachPopover();

    $('#leMain').on('click', '.popover-close', function(event) {
        event.preventDefault();
        $(this).closest('.popover').popover('hide').remove();
    });
});

Replace #leMain with body or with some other #timeline container.

[SciGno]

@Skylinex
Thanks a lot for the quick reply. I'll give it a try.

[mcshaman]

I also would like to see an option for tool tips. I tried to implement one with CSS :hover but found some limitations to the size and position as they can get cut off by the timelines hidden overflow.

[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

[jasontibbitts]

I just happened to need this and ran across this closed issue. I managed to get something that at least works for my use case. Just pull in jquery and powerTip, do

$('.group .item').powerTip({placement: 'se', smartPlacement: true, mouseOnToPopup: true});

(or whatever selector you need to get the items you want) and then the title property on every element can be any HTML you want. I'm doing a little security camera system and the elements on the timeline are videos. The tooltips display small versions of the videos, with controls and everything. Seems to work fine, even with zooming and scrolling.

Maybe this is trivial or pointless, since I don't really know what I'm doing, but at least I have something going.

[jasontibbitts]

Meh; this for some reason doesn't work if you call setGroups, even if you just initially set up the timeline that way. It doesn't appear that the structure of the elements changes if you do that, and powerTip attaches the events to all of the items properly, but either the tooltip doesn't fire, or it fires and the title tooltip appears. Looks like I need to find another way to do what I wanted to do.