Add jQuery tooltips.

There are responsive and touch-friendly, including a tweakable
timeout so they don't get too annoying when used on a collection
of icon buttons. Demoed on reset timestamp button in entry editor.

templates/2k11/admin/entries.tpl

@@ -23,7 +23,7 @@
             <label for="serendipityNewTimestamp">{$CONST.DATE}</label>
             <input id="serendipityNewTimestamp" name="serendipity[new_timestamp]" type="datetime-local" value="{$entry_vars.timestamp|@formatTime:'o-m-d\TH:i':true:false:true}">
             
-            <a id="reset_timestamp" class="button_link" href="#serendipityNewTimestamp" data-currtime="{$entry_vars.reset_timestamp|@formatTime:'o-m-d\TH:i':true:false:true}" title="{$CONST.RESET_DATE_DESC}"><span class="icon-clock"></span><span class="visuallyhidden"> {$CONST.RESET_DATE}</span></a>
+            <a id="reset_timestamp" class="button_link" href="#serendipityNewTimestamp" data-currtime="{$entry_vars.reset_timestamp|@formatTime:'o-m-d\TH:i':true:false:true}" title="{$CONST.RESET_DATE_DESC}" rel="tooltip"><span class="icon-clock"></span><span class="visuallyhidden"> {$CONST.RESET_DATE}</span></a>
         </div>
     {/if}
         <div id="edit_entry_category" class="form_select">

templates/2k11/admin/serendipity_editor.js.tpl

@@ -635,6 +635,72 @@ function highlightComment(id, checkvalue) {
         footer: '#meta'
     });
 
+    // Tooltips, http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly
+    var targets = $('[rel~=tooltip]'),
+        target  = false,
+        tooltip = false,
+        title   = false;
+ 
+    targets.bind('mouseenter', function() { 
+        target  = $(this);
+        tip     = target.attr('title');
+        tooltip = $('<div id="tooltip"></div>');
+ 
+        if(!tip || tip == '') return false;
+ 
+        target.removeAttr('title');
+        tooltip.css('opacity', 0)
+               .html(tip)
+               .appendTo('body');
+ 
+        var init_tooltip = function() { 
+            if($(window).width() < tooltip.outerWidth() * 1.5)
+                tooltip.css('max-width', $(window).width() / 2);
+            else
+                tooltip.css('max-width', 340);
+ 
+            var pos_left = target.offset().left + (target.outerWidth() / 2) - (tooltip.outerWidth() / 2),
+                pos_top  = target.offset().top - tooltip.outerHeight() - 20;
+ 
+            if(pos_left < 0) { 
+                pos_left = target.offset().left + target.outerWidth() / 2 - 20;
+                tooltip.addClass('left');
+            } else
+                tooltip.removeClass('left');
+ 
+            if(pos_left + tooltip.outerWidth() > $(window).width()) { 
+                pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
+                tooltip.addClass('right');
+            } else
+                tooltip.removeClass('right');
+ 
+            if(pos_top < 0) { 
+                var pos_top  = target.offset().top + target.outerHeight();
+                tooltip.addClass('top');
+            } else
+                tooltip.removeClass('top');
+ 
+            setTimeout(function () { 
+                tooltip.css({ left: pos_left, top: pos_top })
+                    .animate({ top: '+=8', opacity: 1 }, 250);
+            }, 750);
+        };
+ 
+        init_tooltip();
+        $(window).resize(init_tooltip);
+ 
+        var remove_tooltip = function() { 
+            tooltip.animate({ top: '-=8', opacity: 0 }, 50, function() { 
+                $(this).remove();
+            });
+ 
+            target.attr('title', tip);
+        };
+ 
+        target.bind('mouseleave', remove_tooltip);
+        tooltip.bind('click', remove_tooltip);
+    });
+
     // Fire WYSIWYG editor(s)
     spawn();
 

templates/2k11/admin/style.css

@@ -436,6 +436,55 @@ nav ol {
 .icon-clock:before { content: '\e822'; }
 
 
+/* TOOLTIPS
+   ----------------------------------------------------------------- */
+#tooltip {
+    background: #222;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -ms-border-radius: 4px;
+    -o-border-radius: 4px;
+    border-radius: 4px;
+    color: #fcfcfc;
+    font-size: .875em;
+    padding: 2px 8px;
+    position: absolute;
+    text-align: center;
+    z-index: 100;
+}
+ 
+#tooltip:after {
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid #222;
+    content: '';
+    height: 0;
+    margin-left: -8px;
+    position: absolute;
+    left: 50%;
+    bottom: -8px;
+    width: 0;
+}
+ 
+#tooltip.top:after {
+    border-top-color: transparent;
+    border-bottom: 8px solid #222;
+    top: -16px;
+    bottom: auto;
+}
+ 
+#tooltip.left:after {
+    left: 8px;
+    margin: 0;
+}
+ 
+#tooltip.right:after {
+    right: 8px;
+    left: auto;
+    margin: 0;
+}
+
+
 /* BACKEND HELPER CLASSES
    ----------------------------------------------------------------- */
 .icon_link,
@@ -949,8 +998,7 @@ input[type=checkbox],
 
    Color scheme:
    -------------
-   Dark blue:   #25253d     Mid blue:    #3e5f81
-   Lite blue:   #ccdee7     Yellow:      #ffbf00
+   Dark blue:   #3e5f81     Lite blue:   #ccdee7
    Orange:      #d06604     
    Off black:   #222        Off white:   #fcfcfc
    ----------------------------------------------------------------- */