Anonymous avatar Anonymous committed b77d0aa

Added option to have cursor tooltip follow the mouse or not.
Updated tooltip css to have a gray background with transparency.
Fixed tooltip so that could specify position when it followed mouse.

Comments (0)

Files changed (3)

src/jquery.jqplot.css

     border: 1px solid #cccccc;
     font-size: 0.75em;
     white-space: nowrap;
+    background: #cccccc;
+	opacity: 0.7;
+	filter:alpha(opacity=70);
 }

src/plugins/jqplot.cursor.js

 	    // prop: showTooltip
 	    // show a cursor position tooltip near the cursor
 	    this.showTooltip = false;
+	    // prop: followMouse
+	    // Tooltip follows the mouse, it is not at a fixed location.
+	    // Tooltip will show on the grid at the location given by
+	    // tooltipLocation, offset from the grid edge by tooltipOffset.
+	    this.followMouse = true;
 	    // prop: tooltipLocation
-	    // Where to position tooltip relative to cursor.
+	    // Where to position tooltip.  If followMouse is true, this is
+	    // relative to the cursor, otherwise, it is relative to the grid.
 	    // One of 'n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'
 	    this.tooltipLocation = 'se';
 	    // prop: tooltipOffset
-	    // Pixel offset of tooltip from the cursor
+	    // Pixel offset of tooltip from the grid boudaries or cursor center.
 	    this.tooltipOffset = 6;
 	    // prop: showTooltipGridPosition
 	    // show the grid pixel coordinates of the mouse.
 	$.jqplot.preInitHooks.push($.jqplot.Cursor.init);
 	$.jqplot.postDrawHooks.push($.jqplot.Cursor.postDraw);
 	
-	function moveTooltip(gridpos, datapos, plot) {
+	function updateTooltip(gridpos, datapos, plot) {
     	var c = plot.plugins.cursor;
-        var x = gridpos.x + plot._gridPadding.left + c.tooltipOffset;
-        var y = gridpos.y + plot._gridPadding.top + c.tooltipOffset;
-        c._tooltipElem.css('left', x);
-        c._tooltipElem.css('top', y);
         var s = '';
         var addbr = false;
         if (c.showTooltipGridPosition) {
         c._tooltipElem.html(s);
 	}
 	
+	function moveTooltip(gridpos, plot) {
+    	var c = plot.plugins.cursor;  
+    	var elem = c._tooltipElem;
+        switch (c.tooltipLocation) {
+            case 'nw':
+                var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - c.tooltipOffset;
+                var y = gridpos.y + plot._gridPadding.top - c.tooltipOffset - elem.outerHeight(true);
+                break;
+            case 'n':
+                var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true)/2;
+                var y = gridpos.y + plot._gridPadding.top - c.tooltipOffset - elem.outerHeight(true);
+                break;
+            case 'ne':
+                var x = gridpos.x + plot._gridPadding.left + c.tooltipOffset;
+                var y = gridpos.y + plot._gridPadding.top - c.tooltipOffset - elem.outerHeight(true);
+                break;
+            case 'e':
+                var x = gridpos.x + plot._gridPadding.left + c.tooltipOffset;
+                var y = gridpos.y + plot._gridPadding.top - elem.outerHeight(true)/2;
+                break;
+            case 'se':
+                var x = gridpos.x + plot._gridPadding.left + c.tooltipOffset;
+                var y = gridpos.y + plot._gridPadding.top + c.tooltipOffset;
+                break;
+            case 's':
+                var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true)/2;
+                var y = gridpos.y + plot._gridPadding.top + c.tooltipOffset;
+                break;
+            case 'sw':
+                var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - c.tooltipOffset;
+                var y = gridpos.y + plot._gridPadding.top + c.tooltipOffset;
+                break;
+            case 'w':
+                var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - c.tooltipOffset;
+                var y = gridpos.y + plot._gridPadding.top - elem.outerHeight(true)/2;
+                break;
+            default:
+                var x = gridpos.x + plot._gridPadding.left + c.tooltipOffset;
+                var y = gridpos.y + plot._gridPadding.top + c.tooltipOffset;
+                break;
+        }
+            
+        c._tooltipElem.css('left', x);
+        c._tooltipElem.css('top', y);
+	}
+	
+	function positionTooltip(plot) { 
+	    // fake a grid for positioning
+	    var grid = plot._gridPadding; 
+    	var c = plot.plugins.cursor;
+    	var elem = c._tooltipElem;  
+        switch (c.tooltipLocation) {
+            case 'nw':
+                var a = grid.left + c.tooltipOffset;
+                var b = grid.top + c.tooltipOffset;
+                elem.css('left', a);
+                elem.css('top', b);
+                break;
+            case 'n':
+                var a = (grid.left + (plot._plotDimensions.width - grid.right))/2 - elem.outerWidth(true)/2;
+                var b = grid.top + c.tooltipOffset;
+                elem.css('left', a);
+                elem.css('top', b);
+                break;
+            case 'ne':
+                var a = grid.right + c.tooltipOffset;
+                var b = grid.top + c.tooltipOffset;
+                elem.css({right:a, top:b});
+                break;
+            case 'e':
+                var a = grid.right + c.tooltipOffset;
+                var b = (grid.top + (plot._plotDimensions.height - grid.bottom))/2 - elem.outerHeight(true)/2;
+                elem.css({right:a, top:b});
+                break;
+            case 'se':
+                var a = grid.right + c.tooltipOffset;
+                var b = grid.bottom + c.tooltipOffset;
+                elem.css({right:a, bottom:b});
+                break;
+            case 's':
+                var a = (grid.left + (plot._plotDimensions.width - grid.right))/2 - elem.outerWidth(true)/2;
+                var b = grid.bottom + c.tooltipOffset;
+                elem.css({left:a, bottom:b});
+                break;
+            case 'sw':
+                var a = grid.left + c.tooltipOffset;
+                var b = grid.bottom + c.tooltipOffset;
+                elem.css({left:a, bottom:b});
+                break;
+            case 'w':
+                var a = grid.left + c.tooltipOffset;
+                var b = (grid.top + (plot._plotDimensions.height - grid.bottom))/2 - elem.outerHeight(true)/2;
+                elem.css({left:a, top:b});
+                break;
+            default:  // same as 'se'
+                var a = grid.right - c.tooltipOffset;
+                var b = grid.bottom + c.tooltipOffset;
+                elem.css({right:a, bottom:b});
+                break;
+        }
+	}
+	
 	function handleMouseEnter(ev, gridpos, datapos, neighbors, plot) {
 	    var c = plot.plugins.cursor;
 	    if (c.show) {
     	    c.previousCursor = ev.target.style.cursor;
     	    ev.target.style.cursor = c.style;
             if (c.showTooltip) {
-                moveTooltip(gridpos, datapos, plot);
+                updateTooltip(gridpos, datapos, plot);
+                if (c.followMouse) {
+                    moveTooltip(gridpos, plot);
+                }
+                else {
+                    positionTooltip(plot);
+                }
                 c._tooltipElem.show();
             }
 	    }
 	function handleMouseMove(ev, gridpos, datapos, neighbors, plot) {
     	var c = plot.plugins.cursor;
     	if (c.show && c.showTooltip) {
-            moveTooltip(gridpos, datapos, plot);
+            updateTooltip(gridpos, datapos, plot);
+            if (c.followMouse) {
+                moveTooltip(gridpos, plot);
+            }
     	}
 	}
 })(jQuery);
     plot1 = $.jqplot('chart', [cosPoints, sinPoints, powPoints1, powPoints2], {
         // title: 'jqPlot',
         grid:{background:'#fefbf3', borderWidth:2.5},
-        cursor:{showTooltip:true},
+        cursor:{showTooltip:true, followMouse:true, tooltipLocation:'se', tooltipCSS:{background:'#000000'}},
         axes:{yaxis:{min:-6, max:6, tickOptions:{formatString:'%d'}},
           xaxis:{min:-.5, max:6.5}},
         series: [
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.