jiahuang / d3-timeline

Simple JS timeline plugin for d3
1.04k stars 281 forks source link

Get element id inside hover function #60

Closed inodb closed 9 years ago

inodb commented 9 years ago

I would like to display a tooltip on each time point using qTip. I believe I need to get the id of each element inside the hover function to call qtip on it. Problem is that I can't seem to reconstruct the name of the element using d,i and datum. The element id should be in the form of timelineItem_j_i, but I don't know what the recommended way is to get the j variable (Im using a stacked timeline). I could set the class attribute in the data, but I'd prefer to keep the styling logic out.

inodb commented 9 years ago

I solved it without using the hover function. This shows the starting time as a tooltip using jquery and qtip:

$("[id^='timelineItem']").each(function() {
  addToolTip($(this), $(this).prop("__data__").starting_time);
});

The addToolTip function looks like this:

function addToolTip(elem, text) {
     elem.qtip({
            content: {
                text: text
            },
            events: {
                render: function(event, api) {
                    $(this).html(text);
                }
            },
            show: {event: "mouseover"},
            hide: {fixed: true, delay: 0, event: "mouseout"},
            style: { classes: 'qtip-light qtip-rounded qtip-wide' },
            position: {my:'top middle',at:'bottom middle',viewport: $(window)},
        }); 
}
jiahuang commented 9 years ago

Thanks for documenting the fix :)