Clean up UITooltips

Summary: Fixes positioning issues by creating another container to hold the abs. positioned arrows. (Issues primarily presented on Workboards).

Test Plan: Test UI arrows on a workboard, applciation launcher, and in UIExamples.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Differential Revision: https://secure.phabricator.com/D10897

resources/celerity/map.php

@@ -7,8 +7,8 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'c48b3276',
-    'core.pkg.js' => 'e5f7f2ba',
+    'core.pkg.css' => '8db4d657',
+    'core.pkg.js' => 'a78e2fa6',
     'darkconsole.pkg.js' => 'df001cab',
     'differential.pkg.css' => '8af45893',
     'differential.pkg.js' => '42c10e78',
@@ -30,7 +30,7 @@ return array(
     'rsrc/css/aphront/phabricator-nav-view.css' => '9283c2df',
     'rsrc/css/aphront/table-view.css' => 'b22b7216',
     'rsrc/css/aphront/tokenizer.css' => '82ce2142',
-    'rsrc/css/aphront/tooltip.css' => '9c90229d',
+    'rsrc/css/aphront/tooltip.css' => '4099b97e',
     'rsrc/css/aphront/transaction.css' => '5d0cae25',
     'rsrc/css/aphront/two-column.css' => '16ab3ad2',
     'rsrc/css/aphront/typeahead.css' => 'a989b5b3',
@@ -449,7 +449,7 @@ return array(
     'rsrc/js/core/ShapedRequest.js' => '7cbe244b',
     'rsrc/js/core/TextAreaUtils.js' => '5c93c52c',
     'rsrc/js/core/Title.js' => '5c1c758c',
-    'rsrc/js/core/ToolTip.js' => '3915d490',
+    'rsrc/js/core/ToolTip.js' => 'ef8ca3d9',
     'rsrc/js/core/behavior-active-nav.js' => 'e379b58e',
     'rsrc/js/core/behavior-audio-source.js' => '59b251eb',
     'rsrc/js/core/behavior-autofocus.js' => '7319e029',
@@ -508,7 +508,7 @@ return array(
     'aphront-panel-view-css' => '5846dfa2',
     'aphront-table-view-css' => 'b22b7216',
     'aphront-tokenizer-control-css' => '82ce2142',
-    'aphront-tooltip-css' => '9c90229d',
+    'aphront-tooltip-css' => '4099b97e',
     'aphront-two-column-view-css' => '16ab3ad2',
     'aphront-typeahead-control-css' => 'a989b5b3',
     'auth-css' => '1e655982',
@@ -741,7 +741,7 @@ return array(
     'phabricator-standard-page-view' => '3f5b9311',
     'phabricator-textareautils' => '5c93c52c',
     'phabricator-title' => '5c1c758c',
-    'phabricator-tooltip' => '3915d490',
+    'phabricator-tooltip' => 'ef8ca3d9',
     'phabricator-transaction-view-css' => '5d0cae25',
     'phabricator-ui-example-css' => '528b19de',
     'phabricator-uiexample-javelin-view' => 'd4a14807',
@@ -1046,12 +1046,6 @@ return array(
       'javelin-behavior',
       'javelin-dom',
     ),
-    '3915d490' => array(
-      'javelin-install',
-      'javelin-util',
-      'javelin-dom',
-      'javelin-vector',
-    ),
     '3ab51e2c' => array(
       'javelin-behavior',
       'javelin-behavior-device',
@@ -1834,6 +1828,12 @@ return array(
       'javelin-dom',
       'phabricator-draggable-list',
     ),
+    'ef8ca3d9' => array(
+      'javelin-install',
+      'javelin-util',
+      'javelin-dom',
+      'javelin-vector',
+    ),
     'efe49472' => array(
       'javelin-install',
       'javelin-util',

src/applications/uiexample/examples/PhabricatorUITooltipExample.php

@@ -16,18 +16,14 @@ final class PhabricatorUITooltipExample extends PhabricatorUIExample {
     require_celerity_resource('aphront-tooltip-css');
 
     $style = 'width: 200px; '.
-             'height: 200px '.
              'text-align: center; '.
              'margin: 20px; '.
              'background: #dfdfdf; '.
-             'padding: 30px 10px; '.
+             'padding: 20px 10px; '.
              'border: 1px solid black; ';
 
     $lorem = <<<EOTEXT
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget urna
-sed ante ultricies consequat id a odio. Mauris interdum volutpat sapien eu
-accumsan. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet,
-consectetur adipiscing elit.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 EOTEXT;
 
     $overflow = str_repeat('M', 1024);

webroot/rsrc/css/aphront/tooltip.css

@@ -6,17 +6,18 @@
   position: absolute;
 }
 
+.jx-tooltip-inner {
+  position: relative;
+  background: rgba(0,0,0, .9);
+  border-radius: 3px;
+}
+
 .jx-tooltip {
-  background: #000;
   color: #f9f9f9;
-  font-size: 12px;
-  padding: 4px 8px;
+  font-size: 13px;
+  padding: 6px 8px;
   overflow: hidden;
   white-space: pre-wrap;
-  border-radius: 3px;
-  opacity: 0.9;
-
-  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
 }
 
 .jx-tooltip:after {
@@ -41,6 +42,10 @@
   top: 50%;
 }
 
+.jx-tooltip-align-E {
+  margin-right: 5px;
+}
+
 .jx-tooltip-align-W .jx-tooltip:after {
   margin-top: -5px;
   border-left-color: #000;
@@ -49,7 +54,7 @@
 }
 
 .jx-tooltip-align-N {
-  margin-top: -5px;
+  margin-bottom: 5px;
 }
 
 .jx-tooltip-align-N .jx-tooltip:after {
@@ -59,6 +64,10 @@
   left: 50%;
 }
 
+.jx-tooltip-align-N {
+  margin-top: 5px;
+}
+
 .jx-tooltip-align-S .jx-tooltip:after {
   margin-left: -5px;
   border-bottom-color: #000;

webroot/rsrc/js/core/ToolTip.js

@@ -29,14 +29,19 @@ JX.install('Tooltip', {
         }
       }
 
-      var node = JX.$N(
+      var node_inner = JX.$N(
         'div',
-        { className: 'jx-tooltip-container' },
+        { className: 'jx-tooltip-inner' },
         [
           JX.$N('div', { className: 'jx-tooltip' }, content),
           JX.$N('div', { className: 'jx-tooltip-anchor' })
         ]);
 
+      var node = JX.$N(
+        'div',
+        { className: 'jx-tooltip-container' },
+        node_inner);
+
       node.style.maxWidth  = scale + 'px';
 
       JX.Tooltip.hide();