diff --git a/libreplan-webapp/src/main/webapp/dashboard/_dashboardfororder.zul b/libreplan-webapp/src/main/webapp/dashboard/_dashboardfororder.zul index e90c5429a..5f00c4343 100644 --- a/libreplan-webapp/src/main/webapp/dashboard/_dashboardfororder.zul +++ b/libreplan-webapp/src/main/webapp/dashboard/_dashboardfororder.zul @@ -131,6 +131,19 @@ var global_progress = { }; + + .tooltip { + display:none; + position:absolute; + border:1px solid #333; + background-color:#161616; + border-radius:5px; + padding:10px; + color:#fff; + font-size:12px Arial; + } + + diff --git a/libreplan-webapp/src/main/webapp/dashboard/_globalProgress.zul b/libreplan-webapp/src/main/webapp/dashboard/_globalProgress.zul index cfc3ad06d..408c5151a 100644 --- a/libreplan-webapp/src/main/webapp/dashboard/_globalProgress.zul +++ b/libreplan-webapp/src/main/webapp/dashboard/_globalProgress.zul @@ -63,7 +63,34 @@ if (series !== undefined) { this.series = jQuery.parseJSON(series); } - this.plot = $.jqplot(this.id, jQuery.parseJSON(data), this); + data = jQuery.parseJSON(data); + this.plot = $.jqplot(this.id, data, this); + this.attachTooltip(); + }, + attachTooltip: function() { + var node = $('#' + this.id); + node.bind('jqplotDataHighlight', + function (ev, seriesIndex, pointIndex, data) { + var x = ev.pageX - node.offset().left; + var y = ev.pageY - node.offset().top; + + var tooltip = $(''); + + tooltip.text(data[0]).appendTo(node); + tooltip.css({'top': y, 'left': x, 'position': 'absolute'}); + tooltip.fadeIn('slow'); + } + ); + node.bind('jqplotDataUnhighlight', + function (ev) { + $('.tooltip').remove(); + } + ); + node.mousemove(function(ev) { + var x = ev.pageX - node.offset().left; + var y = ev.pageY - node.offset().top; + $('.tooltip').css({'top': y, 'left': x, 'position': 'absolute'}) + }); } };