animated tooltips and also make them look better with down arrow and …

…double border
resolve · Jun 17, 2010 · 437550e · 437550e
1 parent 75414e1
commit 437550e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/public/images/refinery/tooltip-nib.png b/public/images/refinery/tooltip-nib.png
diff --git a/public/javascripts/refinery/admin.js b/public/javascripts/refinery/admin.js
@@ -200,19 +200,35 @@ init_tooltips = function(args){
   {
     // create tooltip on hover and destroy it on hoveroff.
     $(element).hover(function(e) {
-      tooltip = $("<div class='tooltip'></div>").html($(this).attr('tooltip')).corner('6px').appendTo($('#tooltip_container'));
+      tooltip = $("<div class='tooltip'><span></span></div>").corner('6px').appendTo($('#tooltip_container'));
+			tooltip.find("span").html($(this).attr('tooltip'));
+			tooltip.find("span").corner('6px');
+
+			nib = $("<img src='/images/refinery/tooltip-nib.png' class='tooltip-nib'/>").appendTo($('#tooltip_container'));
+
+      tooltip.css('opacity', '0');
       tooltip.css('maxWidth', '300px');
       tooltip.css('left', ((left = $(this).offset().left - (tooltip.outerWidth() / 2) + ($(this).outerWidth() / 2)) >= 0 ? left : 0));
 
       if ((offset = tooltip.offset() != null) && (offset.left + tooltip.outerWidth) > (window_width = $(window).width())) {
         tooltip.css('left', window_width - tooltip.outerWidth);
       }
 
-      tooltip.css('top', $(this).offset().top - tooltip.outerHeight() - 8);
+      tooltip.css('top', $(this).offset().top - tooltip.outerHeight() - 2);
+
+			nib.css('left', (tooltip.offset().left + (tooltip.outerWidth() / 2) - 5) + 'px');
+			nib.css('top', (tooltip.offset().top + tooltip.height() - 10) + 'px');
+
+      //tooltip.show();
+			tooltip.animate({
+          top: ((tooltip.offset().top - 10) + 'px'),
+          opacity: 1
+      }, 200, 'swing' );
+
 
-      tooltip.show();
     }, function(e) {
       $('.tooltip').remove();
+			$('.tooltip-nib').remove();
     });
     if ($(element).attr('tooltip') == null) {
       $(element).attr({'tooltip': $(element).attr('title'), 'title': ''});

diff --git a/public/stylesheets/refinery/refinery.css b/public/stylesheets/refinery/refinery.css
@@ -1107,10 +1107,19 @@ ul#plugins li {
 }
 /**** Tooltip Icons *****/
 .tooltip {
-  background: #22A7F2;
-  border: 4px solid #22A7F2;
-  padding: 5px;
+  background: #22a7f2;
+  border: 1px solid #1b82bd;
   word-wrap:break-word;
+	position: relative;
+}
+.tooltip span {
+	display: block;
+  padding: 10px;
+	border: 1px solid #62c1f6;
+}
+.tooltip-nib {
+	position: absolute;
+	z-index: 10001;
 }
 .tooltip, .tooltip * {
   color: white;