Addition of tooltip behavior.

[utils] / wicket / components / src / main / resources / org / wamblee / wicket / behavior / wamblee-tooltip.js

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 (file)
index 0000000..7773cb4
--- /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