Avoid to show tooltip in barspacing of sparkline bar chart

Question

I have created space between bar graphs. But I want to show tooltip only on bar not in blank space.

var values = [100.00,100.00,100.00,80.00,80.00,66.67];

// Draw a sparkline for the #sparkline element
$('#sparkline').sparkline(values, {
    type: "bar",
    // Map the offset in the list of values to a name to use in the tooltip
    tooltipFormat: '{{offset:offset}} {{value}}',
    barSpacing: '50px',
    tooltipValueLookups: {
        'offset': {
            0: 'Jul',
            1: 'Aug',
            2: 'Sep',
            3: 'Oct',
            4: 'Nov',
            5: 'Dev',
        }
    },
})

The jsfiddle - http://jsfiddle.net/RsbHC/396/

Answer 1

Maybe you can add a bind a mouse move listener to your sparkline object, to log the mouse moves and its possition. And decide if a tooltip should be displayed or not.

var values = [100.00,100.00,100.00,80.00,80.00,66.67];

var barSpacing = 50;
var barWidth = 4;
$('#sparkline').bind('mousemove',function(e){ 
  var xPosInBar = e.offsetX % (barSpacing + barWidth);
  if(xPosInBar > barWidth ){
    $('#jqstooltip').hide();
  }else{
    $('#jqstooltip').show();
  }
});

// Draw a sparkline for the #sparkline element
$('#sparkline').sparkline(values, {
    type: "bar",
    // Map the offset in the list of values to a name to use in the tooltip
    tooltipFormat: '{{offset:offset}} {{value}}',
    barWidth: barWidth+'px',
    barSpacing: barSpacing+'px',
    tooltipValueLookups: {
        'offset': {
            0: 'Jul',
            1: 'Aug',
            2: 'Sep',
            3: 'Oct',
            4: 'Nov',
            5: 'Dev',
        }
    },
});

The jsfiddle - http://jsfiddle.net/RsbHC/397/