Add v0.4.2 + new example

README.md

@@ -11,7 +11,14 @@ See the `example.html` and `example_series.html` files and source code of plugin
 
 ## Changelog ##
 
-### What's new in v0.4.1? ###
+### What's new in v0.4.2? ###
+
+-	tooltip is appended to `body`, not `placeholder` of graph
+-	changed default values of tip's shifts
+-	time is formatted when first axis of flot's multi-axes is in time mode (issue #2) (full multi-axes support maybe in the future)
+-	`#flotTip` container is initialized only if it does not exist (see new multiple-axes example and re-initialize plot)
+
+### v0.4.1 ###
 
 -	default theme with new option to disable it if you like to add your own styles
 
@@ -64,8 +71,8 @@ In comments there are default values
 		content:		string			//"%s | X: %x | Y: %y.2"
 		dateFormat: 	string		 	//"%y-%0m-%0d"
 		shifts: { 
-			x: 			int				//25
-			y: 			int				//25
+			x: 			int				//10
+			y: 			int				//20
 		},
 		defaultTheme:	boolean			//true
 	}

example.html

@@ -12,7 +12,7 @@
 	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
     <!--[if lte IE 8]><script src="js/excanvas.min.js"></script><![endif]-->
 	<script src="js/jquery.flot.min.js"></script>
-	<script src="js/jquery.flot.tooltip_0.4.1.js"></script>
+	<script src="js/jquery.flot.tooltip_0.4.2.js"></script>
 
 	<style type="text/css">
 		body {font-family: sans-serif; font-size: 16px; margin: 50px; max-width: 800px;}
@@ -38,10 +38,9 @@ <h1>flot.tooltip plugin example page</h1>
 			tooltipOpts: {
 				content: "<h4>%s</h4><ul><li>X is %x</li><li>Y is %y</li></ul>",
 				dateFormat: "%y-%0m-%0d %H:%M:%S",
-				series: false,
 				shifts: {
-					x: -55,
-					y: 25
+					x: 10,
+					y: 20
 				},
 				defaultTheme: false
 			},

example_series.html

@@ -12,7 +12,7 @@
 	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
     <!--[if lte IE 8]><script src="js/excanvas.min.js"></script><![endif]-->
 	<script src="js/jquery.flot.min.js"></script>
-	<script src="js/jquery.flot.tooltip_0.4.1.min.js"></script>
+	<script src="js/jquery.flot.tooltip_0.4.2.js"></script>
 
 	<style type="text/css">
 		body {font-family: sans-serif; font-size: 16px; margin: 50px; max-width: 800px;}
@@ -46,9 +46,8 @@ <h1>flot.tooltip plugin example page</h1>
 			tooltip: true,
 			tooltipOpts: {
 				content: "'%s' of %x.1 is %y.4",
-				series: true,
 				shifts: {
-					x: -55,
+					x: -60,
 					y: 25
 				}
 			}

js/jquery.flot.tooltip_0.4.2.js

@@ -0,0 +1,147 @@
+/*
+ * jquery.flot.tooltip
+ *
+ * desc:	create tooltip with values of hovered point on the graph, 
+			support many series, time mode,
+			you can set custom tip content (also with use of HTML tags) and precision of values
+ * version:	0.4.2
+ * author: 	Krzysztof Urbas @krzysu [myviews.pl]
+ * website:	https://github.com/krzysu/flot.tooltip
+ * 
+ * released under MIT License, 2011
+*/
+
+(function ($) {
+    var options = {
+		tooltip: false, //boolean
+		tooltipOpts: {
+			content: "%s | X: %x | Y: %y.2", //%s -> series label, %x -> X value, %y -> Y value, %x.2 -> precision of X value
+			dateFormat: "%y-%0m-%0d",
+			shifts: {
+				x: 10,
+				y: 20
+			},
+			defaultTheme: true
+		}
+	};
+
+    function init(plot) {
+
+		var tipPosition = {x: 0, y: 0};
+		var opts = plot.getOptions();
+
+		function updateTooltipPosition(pos) {
+			tipPosition.x = pos.x;
+			tipPosition.y = pos.y;
+		};
+
+		function onMouseMove(e) {
+
+			var pos = {x: 0, y: 0};
+			pos.x = e.pageX;
+			pos.y = e.pageY;
+
+			updateTooltipPosition(pos);
+        };
+
+		function timestampToDate(tmst) {
+
+			var theDate = new Date(tmst);
+
+			return $.plot.formatDate(theDate, opts.tooltipOpts.dateFormat);
+		};
+
+		plot.hooks.bindEvents.push(function (plot, eventHolder) {
+
+			var to = opts.tooltipOpts;
+			var placeholder = plot.getPlaceholder();
+			var $tip;
+
+			if (opts.tooltip === false) return;
+
+			if( $('#flotTip').length > 0 ){
+				$tip = $('#flotTip');
+			}
+			else {
+				$tip = $('<div />').attr('id', 'flotTip');
+				$tip.appendTo('body').hide().css({position: 'absolute'});
+
+				if(to.defaultTheme) {
+					$tip.css({
+						'background': '#fff',
+						'background': 'rgba(255, 255, 255, 0.9)',
+						'z-index': '100',
+						'padding': '0.4em 0.6em',
+						'border-radius': '0.5em',
+						'font-size': '0.8em',
+						'border': '1px solid #111'
+					});
+				}
+			}
+
+			$(placeholder).bind("plothover", function (event, pos, item) {
+				if (item) {					
+					var tipText;
+
+					if(opts.xaxis.mode === "time" || opts.xaxes[0].mode === "time") {
+						tipText = stringFormat(to.content, item, timestampToDate);
+					}
+					else {
+						tipText = stringFormat(to.content, item);						
+					}
+
+					$tip.html( tipText ).css({left: tipPosition.x + to.shifts.x, top: tipPosition.y + to.shifts.y}).show();
+				}
+				else {
+					$tip.hide().html('');
+				}
+			});
+
+            eventHolder.mousemove(onMouseMove);
+        });
+
+		function stringFormat(content, item, fnct) {
+
+			var seriesPattern = /%s/;
+			var xPattern = /%x\.{0,1}(\d{0,})/;
+			var yPattern = /%y\.{0,1}(\d{0,})/;
+
+			//series match
+			if( typeof(item.series.label) !== 'undefined' ) {
+				content = content.replace(seriesPattern, item.series.label);
+			}
+			// xVal match
+			if( typeof(fnct) === 'function' ) {
+				content = content.replace(xPattern, fnct(item.datapoint[0]) );
+			}
+			else {
+				content = adjustValPrecision(xPattern, content, item.datapoint[0]);
+			}
+			// yVal match
+			content = adjustValPrecision(yPattern, content, item.datapoint[1]);
+
+			return content;
+		};
+
+		function adjustValPrecision(pattern, content, value) {
+
+			var precision;
+			if( content.match(pattern) !== 'null' ) {
+				if(RegExp.$1 !== '') {
+					precision = RegExp.$1;
+					value = value.toFixed(precision)
+				}
+				content = content.replace(pattern, value);
+			}
+
+			return content;
+		};
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'tooltip',
+        version: '0.4'
+    });
+})(jQuery);