Commits

Chris Leonello committed dd65cd0

Comments added to example.

Comments (0)

Files changed (1)

examples/area.php

         }
     });
     
+    // capture the highlighters highlight event and show a custom tooltip.
     $('#chart2').bind('jqplotHighlighterHighlight', 
         function (ev, seriesIndex, pointIndex, data, plot) {
-            var content = plot.series[seriesIndex]._xaxis.ticks[pointIndex][1] + ', ' + data[1];
+            // create some content for the tooltip.  Here we want the label of the tick,
+            // which is not supplied to the highlighters standard tooltip.
+            var content = plot.series[seriesIndex].label + ', ' + plot.series[seriesIndex]._xaxis.ticks[pointIndex][1] + ', ' + data[1];
+            // get a handle on our custom tooltip element, which was previously created
+            // and styled.  Be sure it is initiallly hidden!
             var elem = $('#customTooltipDiv');
             elem.html(content);
+            // Figure out where to position the tooltip.
             var h = elem.outerHeight();
             var w = elem.outerWidth();
             var left = ev.pageX - w - 10;
             var top = ev.pageY - h - 10;
+            // now stop any currently running animation, position the tooltip, and fade in.
             elem.stop(true, true).css({left:left, top:top}).fadeIn(200);
         }
     );
     
+    // Hide the tooltip when unhighliting.
     $('#chart2').bind('jqplotHighlighterUnhighlight', 
         function (ev) {
             $('#customTooltipDiv').fadeOut(300);
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.