tooltip calculation cleanup

Dogfalo · Jul 16, 2016 · b9e279b · b9e279b
1 parent 2c7072a
commit b9e279b
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 45 deletions.
diff --git a/bin/materialize.css b/bin/materialize.css
@@ -4817,7 +4817,6 @@ small {
   left: 0;
   top: 0;
   pointer-events: none;
-  will-change: top, left;
 }
 
 .backdrop {
@@ -4826,12 +4825,13 @@ small {
   display: none;
   height: 7px;
   width: 14px;
-  border-radius: 0 0 14px 14px;
+  border-radius: 0 0 50% 50%;
   background-color: #323232;
   z-index: -1;
-  -webkit-transform-origin: 50% 10%;
-          transform-origin: 50% 10%;
-  will-change: transform, opacity;
+  -webkit-transform-origin: 50% 0%;
+          transform-origin: 50% 0%;
+  -webkit-transform: translate3d(0, 0, 0);
+          transform: translate3d(0, 0, 0);
 }
 
 .btn, .btn-large,

diff --git a/bin/materialize.js b/bin/materialize.js
diff --git a/css/ghpages-materialize.css b/css/ghpages-materialize.css
diff --git a/js/tooltip.js b/js/tooltip.js
@@ -66,7 +66,6 @@
           // Create backdrop
           backdrop = $('<div class="backdrop"></div>');
           backdrop.appendTo(tooltip);
-          backdrop.css({ top: 0, left:0 });
           return tooltip;
         };
         tooltipEl = renderTooltipEl();
@@ -91,7 +90,8 @@
             var tooltipWidth = tooltipEl.outerWidth();
             var tooltipVerticalMovement = '0px';
             var tooltipHorizontalMovement = '0px';
-            var scale_factor = 8;
+            var scaleXFactor = 8;
+            var scaleYFactor = 8;
             var targetTop, targetLeft, newCoordinates;
 
             if (tooltipPosition === "top") {
@@ -102,8 +102,10 @@
 
               tooltipVerticalMovement = '-10px';
               backdrop.css({
+                bottom: 0,
+                left: 0,
                 borderRadius: '14px 14px 0 0',
-                transformOrigin: '50% 90%',
+                transformOrigin: '50% 100%',
                 marginTop: tooltipHeight,
                 marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
               });
@@ -116,6 +118,8 @@
 
               tooltipHorizontalMovement = '-10px';
               backdrop.css({
+                top: '-7px',
+                right: 0,
                 width: '14px',
                 height: '14px',
                 borderRadius: '14px 0 0 14px',
@@ -132,6 +136,8 @@
 
               tooltipHorizontalMovement = '+10px';
               backdrop.css({
+                top: '-7px',
+                left: 0,
                 width: '14px',
                 height: '14px',
                 borderRadius: '0 14px 14px 0',
@@ -147,6 +153,8 @@
               newCoordinates = repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
               tooltipVerticalMovement = '+10px';
               backdrop.css({
+                top: 0,
+                left: 0,
                 marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
               });
             }
@@ -158,21 +166,14 @@
             });
 
             // Calculate Scale to fill
-            scale_factor = tooltipWidth / 8;
-            if (scale_factor < 8) {
-              scale_factor = 8;
-            }
-            if (tooltipPosition === "right" || tooltipPosition === "left") {
-              scale_factor = tooltipWidth / 10;
-              if (scale_factor < 6)
-                scale_factor = 6;
-            }
+            scaleXFactor = Math.SQRT2 * tooltipWidth / parseInt(backdrop.css('width'));
+            scaleYFactor = Math.SQRT2 * tooltipHeight / parseInt(backdrop.css('height'));
 
             tooltipEl.velocity({ marginTop: tooltipVerticalMovement, marginLeft: tooltipHorizontalMovement}, { duration: 350, queue: false })
               .velocity({opacity: 1}, {duration: 300, delay: 50, queue: false});
             backdrop.css({ display: 'block' })
               .velocity({opacity:1},{duration: 55, delay: 0, queue: false})
-              .velocity({scale: scale_factor}, {duration: 300, delay: 0, queue: false, easing: 'easeInOutQuad'});
+              .velocity({scaleX: scaleXFactor, scaleY: scaleYFactor}, {duration: 300, delay: 0, queue: false, easing: 'easeInOutQuad'});
           };
 
           timeoutRef = setTimeout(showTooltip, tooltipDelay); // End Interval
@@ -189,7 +190,7 @@
             if (started !== true) {
               tooltipEl.velocity({
                 opacity: 0, marginTop: 0, marginLeft: 0}, { duration: 225, queue: false});
-              backdrop.velocity({opacity: 0, scale: 1}, {
+              backdrop.velocity({opacity: 0, scaleX: 1, scaleY: 1}, {
                 duration:225,
                 queue: false,
                 complete: function(){

diff --git a/sass/components/_tooltip.scss b/sass/components/_tooltip.scss
@@ -1,22 +1,21 @@
 .material-tooltip {
-    padding: 10px 8px;
-    font-size: 1rem;
-    z-index: 2000;
-    background-color: transparent;
-    border-radius: 2px;
-    color: #fff;
-    min-height: 36px;
-    line-height: 120%;
-    opacity: 0;
-    display: none;
-    position: absolute;
-    text-align: center;
-    max-width: calc(100% - 4px);
-    overflow: hidden;
-    left:0;
-    top:0;
-    pointer-events: none;
-    will-change: top, left;
+  padding: 10px 8px;
+  font-size: 1rem;
+  z-index: 2000;
+  background-color: transparent;
+  border-radius: 2px;
+  color: #fff;
+  min-height: 36px;
+  line-height: 120%;
+  opacity: 0;
+  display: none;
+  position: absolute;
+  text-align: center;
+  max-width: calc(100% - 4px);
+  overflow: hidden;
+  left: 0;
+  top: 0;
+  pointer-events: none;
 }
 
 .backdrop {
@@ -25,10 +24,9 @@
   display: none;
   height: 7px;
   width: 14px;
-  border-radius: 0 0 14px 14px;
+  border-radius: 0 0 50% 50%;
   background-color: #323232;
   z-index: -1;
-  transform-origin: 50% 10%;
-
-  will-change: transform, opacity;
+  transform-origin: 50% 0%;
+  transform: translate3d(0,0,0);
 }