I managed to fix the issue by creating a javascript proxy function to wrap around the ShowToolTop, HideToolTip and onmousemove client script methods.

The main chunk of the problem is because they have used the visibility='hidden' css property to hide the tooltip instead of display='none'.

I've also made it so the tooltip will appear to the left of the mouse if it detects that it's going to fall off the right hand side of the page and cause the scroll bars to appear. This might need to be adapted if you want it to happen against the right edge of a different element.

The charts ClientID is used as the name of the javascript object which represents each instance of the chart and is accessible as a global variable once the page has finnished loading.

I've used jquery here but this can easily be adapted to another library or plain old javascript.

// To get the correct ClientID, this code needs to be added
// from code behind and after the control has been added to the page
// (js method 'fixChartTooltip()' needs to be called once for each chart on the page)
$(document).ready(function(){
fixChartTooltip(" & MyChart.ClientID & ")
});

// Add this to the markup or .js file
function fixChartTooltip(TrendObject)
{
var proxyShow = TrendObject.ShowTooltip;
var proxyHide = TrendObject.HideTooltip;
var proxyOnMouseMove = TrendObject.onmousemove;

TrendObject.ShowTooltip = function(evt, id, args){
proxyShow.apply(this,[evt, id, args]);
$('#' + this.ID + '_IGTooltipBody').css('display','inline');
ensureTooltipVisible.apply(this);
};

TrendObject.HideTooltip = function(evt, id, args){
proxyHide.apply(this,[evt, id, args]);
$('#' + this.ID + '_IGTooltipBody').css('display','none');
};

TrendObject.onmousemove = function(evt, id){
proxyOnMouseMove.apply(this,[evt, id]);
ensureTooltipVisible.apply(this);
};

function ensureTooltipVisible()
{
var tooltip_ref_body = $('#' + this.ID + '_IGTooltipBody');
var width = tooltip_ref_body.width();
var leftEdge = tooltip_ref_body.position().left;
var rightEdge = leftEdge + width;

if (rightEdge > $(window).width()) {
tooltip_ref_body.css('left',leftEdge - width + 'px');
}
}
}