MozReview: Implement tooltip for landable column cells (Bug 1245577). r?smacleod draft
authorDavid Walsh <dwalsh@mozilla.com>
Wed, 29 Jun 2016 15:34:39 -0500
changeset 8693 b50fcbb50cf51a4dd5ad8556f393b2e849115d99
parent 8250 6c387e38fa6b6eecfd28da60533947a400b9062a
push id967
push userbmo:dwalsh@mozilla.com
push dateWed, 29 Jun 2016 20:41:30 +0000
reviewerssmacleod
bugs1245577
MozReview: Implement tooltip for landable column cells (Bug 1245577). r?smacleod MozReview-Commit-ID: IjGZX1pRpWF
pylib/mozreview/mozreview/static/mozreview/css/commits.less
pylib/mozreview/mozreview/static/mozreview/css/review.less
pylib/mozreview/mozreview/static/mozreview/js/review.js
--- a/pylib/mozreview/mozreview/static/mozreview/css/commits.less
+++ b/pylib/mozreview/mozreview/static/mozreview/css/commits.less
@@ -32,34 +32,16 @@
   border: 1px solid #3E3E3E;
   cursor: default;
 
   & > p {
     display: inline;
   }
 }
 
-.help-tooltip:before {
-    content: attr(title);
-    position: absolute;
-    opacity: 0;
-    right: 20px;
-    transition: all 0.15s ease;
-    padding: 10px;
-    color: #333;
-    border-radius: 10px;
-    box-shadow: 2px 2px 1px silver;
-}
-
-.help-tooltip:hover:before {
-    opacity: 1;
-    background: #E7E7E7;
-    pointer-events: none;
-}
-
 #mozreview-child-requests {
   width: 100%;
   table-layout: fixed;
   border-spacing: 0px;
   border-collapse: collapse;
   margin-top:10px;
   min-width: 653px;
   border-top: 1px solid #C1C1C1;
--- a/pylib/mozreview/mozreview/static/mozreview/css/review.less
+++ b/pylib/mozreview/mozreview/static/mozreview/css/review.less
@@ -146,8 +146,66 @@ label[for="mozreview-autoland-try-syntax
 }
 
 // Hide the "Ship it" checkbox, since we use the r?, r+, r- flags provided
 // by MRReviewFlag.
 #id_shipit,
 label[for="id_shipit"] {
   display: none;
 }
+
+// Tooltips for landable and "r?" cells
+#mozreview-child-requests .help-tooltip,
+#mozreview-child-requests .status {
+  position: relative;
+
+  &:hover .review-tooltip {
+    display: block;
+  }
+}
+
+.review-tooltip {
+  display: none;
+  max-width: 400px;
+  position: absolute;
+  top: -6px;
+  right: 90px;
+  font-size: 12px;
+  border: 1px #b09700 solid;
+  background: #fff49c;
+  max-width: 400px;
+}
+
+.review-tooltip-text {
+  position: relative;
+  padding: 10px;
+}
+
+/* shared with before and after */
+.review-tooltip-text:before, .review-tooltip-text:after {
+  content: ' ';
+  height: 0;
+  position: absolute;
+  width: 0;
+  border: 8px solid transparent; /* arrow size */
+}
+
+/* top-stacked, smaller arrow */
+.review-tooltip-text:before {
+  border-left-color: #fff49c;  /* arrow color */
+
+  /* positioning */
+  position: absolute;
+  top: 8px;
+  right: -15px;
+  z-index: 2;
+}
+
+/* arrow which acts as a background shadow */
+.review-tooltip-text:after {
+  border-left-color: #b09700;  /* arrow color */
+
+  /* positioning */
+  position: absolute;
+  top: 8px;
+  right: -16px;
+  z-index: 1;
+}
--- a/pylib/mozreview/mozreview/static/mozreview/js/review.js
+++ b/pylib/mozreview/mozreview/static/mozreview/js/review.js
@@ -46,9 +46,21 @@
             break;
         }
         $(reviewText).prepend(
           $('<h4 class="body_top">'+flagDesc+'</h4>')
         );
       })
     }
   });
+
+  // Tooltips for landable and "r?" cells
+  $('#mozreview-child-requests .help-tooltip, #mozreview-child-requests .status div').each(function() {
+     var $element = $(this);
+     var text = $element.attr('title');
+
+     $element.attr('title', '');
+
+     // Draw the tooltip title and text
+     var $tip = $('<div></div>').attr('class', 'review-tooltip').insertAfter($element);
+     $('<div></div>').attr('class', 'review-tooltip-text').text(text).appendTo($tip);
+  });
 });