X-Git-Url: http://wamblee.org/gitweb/?a=blobdiff_plain;f=wicket%2Fcomponents%2Fsrc%2Fmain%2Fresources%2Forg%2Fwamblee%2Fwicket%2Fbehavior%2Fwamblee-tooltip.js;fp=wicket%2Fcomponents%2Fsrc%2Fmain%2Fresources%2Forg%2Fwamblee%2Fwicket%2Fbehavior%2Fwamblee-tooltip.js;h=7773cb4ad4bb5c829684066b2981a9aa7bf4484f;hb=6c5dc665abfe021a7add911d1ca167113f4ccae8;hp=0000000000000000000000000000000000000000;hpb=74740c132a0713c9505a775bf345795cf2198c95;p=utils

diff --git a/wicket/components/src/main/resources/org/wamblee/wicket/behavior/wamblee-tooltip.js b/wicket/components/src/main/resources/org/wamblee/wicket/behavior/wamblee-tooltip.js
new file mode 100644
index 00000000..7773cb4a
--- /dev/null
+++ b/wicket/components/src/main/resources/org/wamblee/wicket/behavior/wamblee-tooltip.js
@@ -0,0 +1,101 @@
+(function($) {
+	
+	org.wamblee.tooltip = org.wamblee.tooltip || {};
+
+	// Generic tooltip setup functions.
+	// There is a default style for the tooltip which can be overriden using
+	// regular CSS for #tooltipContent. This concerns the border, padding,
+	// and background attributes. Use !important in the CSS to override these
+	// styles as these are inline styles.
+	
+	// setup the tooltip for a set of elements (usually only one).
+	//
+	// id: selector identifying the element(s)
+	// text: tooltip text
+	// options: optional options for the tooltip.
+	// Properties are:
+	// delay: Delay in millieconds before the tooltip shows
+	// fadein: Time in ms to fade in
+	// fadeout: Time in ms to fade out
+	// border: Border CSS style
+	// padding: Padding CSS style
+	// background: Background CSS style.
+	org.wamblee.tooltip.setup = function(id, text, options) {
+		var timerid;
+
+		var options = $.extend({
+			delay :  500,
+			fadein : 500,
+			fadeout: 200,
+			border : "1px solid black",
+			padding : "0.2em 0.5em 0.2em 0.5em",
+			background : "yellow"
+		}, org.wamblee.removeNulls(options) );
+
+		// Show the tooltip.
+		var tooltipShow = function(event) {
+			var content = $("#tooltipContent").text(text).css({
+				position : "absolute",
+				top : event.pageY + 5,
+				left : event.pageX,
+				border : options.border,
+				padding : options.padding,
+				background : options.background
+			});
+			timerid = setTimeout(function() {
+				content.fadeIn(options.fadein);
+			}, options.delay);
+
+			// console.log("start");
+		};
+
+		// Hide the tooltip.
+		var tooltipHide = function(event) {
+			$("#tooltipContent").fadeOut(options.fadeout);
+			if (timerid) {
+				console.log("clear timeout");
+				clearTimeout(timerid);
+				timerid = undefined;
+			}
+		}
+
+		// Add hover listeners.
+		$(id).mouseenter(tooltipShow).mouseleave(tooltipHide)
+				.click(tooltipHide).keydown(tooltipHide);
+	}
+
+	// Create the div element at the top of the body tag to hold the content of
+	// the tooltip.
+	$(function() {
+		$("<div>").prependTo("body").text("Initial text").attr("id",
+				"tooltipContent").hide();
+	})
+	
+	// Called to setup client side tooltips based on the title attributes in the
+	// HTML.
+	// 
+	// selector: The title attributes of these elements and their children will
+	// be used
+	// to generate tooltips.
+	org.wamblee.tooltip.clientside = function(selector, options) { 
+		$('[title]', selector).each(
+			      function() { 
+					wrapped = $(this);
+					text = wrapped.attr('title');
+					wrapped.removeAttr('title');
+					org.wamblee.tooltip.setup(this, text, options);
+				  }
+				);
+	}
+	
+	// Called to setup server side tooltips where the server determines the text
+	// of the
+	// tooltip.
+	//
+	// selector: Elements to apply the tooltip to.
+	// options: Mandatory options with at least the text property set.
+	org.wamblee.tooltip.serverside = function(selector, options) { 
+		org.wamblee.tooltip.setup(selector, options.text, options);
+	}
+	
+})(jQuery);
\ No newline at end of file