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                         timerid = setTimeout(function() {
  38                                 content.fadeIn(options.fadein);
  39                         }, options.delay);
  40                         var content = $("#tooltipContent").text(text).css({
  41                                 position : "absolute",
  42                                 top : event.pageY + 5,
  43                                 left : event.pageX,
  44                                 border : options.border,
  45                                 padding : options.padding,
  46                                 background : options.background
  47                         });
  48                         // console.log("start");
  49                 };
  50
  51                 // Hide the tooltip.
  52                 var tooltipHide = function(event) {
  53                         if (timerid) {
  54                                 console.log("clear timeout");
  55                                 clearTimeout(timerid);
  56                                 timerid = undefined;
  57                         }
  58                         $("#tooltipContent").fadeOut(options.fadeout);
  59                 }
  60
  61                 // Add hover listeners.
  62                 $(id).mouseenter(tooltipShow).mouseleave(tooltipHide)
  63                                 .click(tooltipHide).keydown(tooltipHide);
  64         }
  65
  66         // Create the div element at the top of the body tag to hold the content of
  67         // the tooltip.
  68         $(function() {
  69                 $("<div>").prependTo("body").text("Initial text").attr("id",
  70                                 "tooltipContent").hide();
  71         })
  72
  73         // Called to setup client side tooltips based on the title attributes in the
  74         // HTML.
  75         //
  76         // selector: The title attributes of these elements and their children will
  77         // be used
  78         // to generate tooltips.
  79         org.wamblee.tooltip.clientside = function(selector, options) {
  80                 $('[title]', selector).each(
  81                               function() {
  82                                         wrapped = $(this);
  83                                         text = wrapped.attr('title');
  84                                         wrapped.removeAttr('title');
  85                                         org.wamblee.tooltip.setup(this, text, options);
  86                                   }
  87                                 );
  88         }
  89
  90         // Called to setup server side tooltips where the server determines the text
  91         // of the
  92         // tooltip.
  93         //
  94         // selector: Elements to apply the tooltip to.
  95         // options: Mandatory options with at least the text property set.
  96         org.wamblee.tooltip.serverside = function(selector, options) {
  97                 org.wamblee.tooltip.setup(selector, options.text, options);
  98         }
  99
 100 })(jQuery);