GEt X-axis value of the hover point

Question

When a user hovers a data point in a line graph, I want to get the x-axis value of that specfic point so that I can position the tooltip based on that value. Is there a way I can do this? The idea is to get the value in X and subtract the width of the tooltip container to leave it to the left of this point to avoid problems with the tooltip covering the data.

My code is:

http://jsfiddle.net/owhxgaqm/292/

// c3 - custom tooltip
var chart = c3.generate({
    bindto: '#chart-test',
    data: {
        columns: [
            ['data1', 100, 200, 150, 300, 200],
            ['data2', 400, 500, 250, 700, 3000000000000], ]
    },
    tooltip: {
         position: function(data, width, height, thisElement) {
          var containerWidth, tooltipWidth, x, y;
          element = document.getElementById("chart-test");
          containerWidth = element.clientWidth;
          tooltipWidth = element.querySelector('.c3-tooltip').clientWidth * 2;
          x = parseInt(thisElement.getAttribute('x'));
          console.log("x is " + x)
          console.log("tooltipWidth is " + tooltipWidth)
          console.log("data is " + data)
          console.log("thisElement is " + thisElement)
          if (x + tooltipWidth > containerWidth) {
            x = containerWidth - tooltipWidth - 2;
          }
          y = thisElement.getAttribute('y');
          y = y - height;
          return {
            top: y,
            left: x
          };
        }
    }
});