wamblee.org Git - utils/blob - wicket/components/src/main/resources/org/wamblee/wicket/behavior/wamblee-tooltip.js

   1 (function($) {
   2
   3         org.wamblee.tooltip = org.wamblee.tooltip || {};
   4
   5         // Generic tooltip setup functions.
   6         // There is a default style for the tooltip which can be overriden using
   7         // regular CSS for #tooltipContent. This concerns the border, padding,
   8         // and background attributes. Use !important in the CSS to override these
   9         // styles as these are inline styles.
  10
  11         // setup the tooltip for a set of elements (usually only one).
  12         //
  13         // id: selector identifying the element(s)
  14         // text: tooltip text
  15         // options: optional options for the tooltip.
  16         // Properties are:
  17         // delay: Delay in millieconds before the tooltip shows
  18         // fadein: Time in ms to fade in
  19         // fadeout: Time in ms to fade out
  20         // border: Border CSS style
  21         // padding: Padding CSS style
  22         // background: Background CSS style.
  23         org.wamblee.tooltip.setup = function(id, text, options) {
  24                 var timerid;
  25
  26                 var options = $.extend({
  27                         delay :  500,
  28                         fadein : 250,
  29                         fadeout: 100,
  30                         border : "1px solid black",
  31                         padding : "0.2em 0.5em 0.2em 0.5em",
  32                         background : "yellow"
  33                 }, org.wamblee.removeNulls(options) );
  34
  35                 // Show the tooltip.
  36                 var tooltipShow = function(event) {
  37                         var content = $("#tooltipContent").text(text).css({
  38                                 position : "absolute",
  39                                 top : event.pageY + 5,
  40                                 left : event.pageX,
  41                                 border : options.border,
  42                                 padding : options.padding,
  43                                 background : options.background
  44                         });
  45                         timerid = setTimeout(function() {
  46                                 content.fadeIn(options.fadein);
  47                         }, options.delay);
  48
  49                         // console.log("start");
  50                 };
  51
  52                 // Hide the tooltip.
  53                 var tooltipHide = function(event) {
  54                         $("#tooltipContent").fadeOut(options.fadeout);
  55                         if (timerid) {
  56                                 console.log("clear timeout");
  57                                 clearTimeout(timerid);
  58                                 timerid = undefined;
  59                         }
  60                 }
  61
  62                 // Add hover listeners.
  63                 $(id).mouseenter(tooltipShow).mouseleave(tooltipHide)
  64                                 .click(tooltipHide).keydown(tooltipHide);
  65         }
  66
  67         // Create the div element at the top of the body tag to hold the content of
  68         // the tooltip.
  69         $(function() {
  70                 $("<div>").prependTo("body").text("Initial text").attr("id",
  71                                 "tooltipContent").hide();
  72         })
  73
  74         // Called to setup client side tooltips based on the title attributes in the
  75         // HTML.
  76         //
  77         // selector: The title attributes of these elements and their children will
  78         // be used
  79         // to generate tooltips.
  80         org.wamblee.tooltip.clientside = function(selector, options) {
  81                 $('[title]', selector).each(
  82                               function() {
  83                                         wrapped = $(this);
  84                                         text = wrapped.attr('title');
  85                                         wrapped.removeAttr('title');
  86                                         org.wamblee.tooltip.setup(this, text, options);
  87                                   }
  88                                 );
  89         }
  90
  91         // Called to setup server side tooltips where the server determines the text
  92         // of the
  93         // tooltip.
  94         //
  95         // selector: Elements to apply the tooltip to.
  96         // options: Mandatory options with at least the text property set.
  97         org.wamblee.tooltip.serverside = function(selector, options) {
  98                 org.wamblee.tooltip.setup(selector, options.text, options);
  99         }
 100
 101 })(jQuery);