MozReview: Implement tooltip for landable column cells (
Bug 1245577). r?smacleod
MozReview-Commit-ID: IjGZX1pRpWF
--- 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);
+ });
});