dimple.js scatterplot duplicating axis lables

Question

Using dimple.js, I am rendering a scatter plot with the code below. This works fine, but when i hover the mouse over any point, the x and y values are shown twice, once as decimal and below that as percentage. How can i simply keep the percentage x,y values in the hover-popup? Also, is there a way to display additional items in the hover-popup?
Here is the fiddle demonstarting the issue: http://jsfiddle.net/dizzy0ny/ch2187dd/52/

var svg = dimple.newSvg("#chartContainer", 600,600);
var myChart = new dimple.chart(svg);
myChart.setBounds(90, 35, 480, 400)
xAxis = myChart.addMeasureAxis("x", "x");
yAxis = myChart.addMeasureAxis("y", "y");
xAxis.showGridlines = true;
xAxis.tickFormat = '.1%'
yAxis.tickFormat = '.1%'
s1 = myChart.addSeries(["x","y","group"], dimple.plot.bubble, [xAxis, yAxis]);
s1.data = data_scatter

s2 = myChart.addSeries(["y","group"], dimple.plot.line, [xAxis, yAxis]);
s2.data = data_ser1      

myChart.addLegend(90, 480, 330, 20, "left");
myChart.draw();

Answer 1

As per the docs here: http://dimplejs.org/adhoc_viewer.html?id=adhoc_bar_custom_tooltips

You can change the default tooltip like so:

s1.getTooltipText = function (e) {
    return [
        "This is a custom tooltip!",
        "X value: %" + (e.aggField[0]*100).toFixed(2), 
        "Y value: %" + (e.aggField[1]*100).toFixed(2),
        "Group: " + e.aggField[2]
    ];
};

Check out your updated fiddle here: http://jsfiddle.net/ch2187dd/55/

Also, try not to forget those semi-colons! :)