ui: Tooltip Bugs (#8562)

* Fix tooltip offset in Discovery Chain for Firefox Browser

* Add z-index to ember-tooltip to over over the search/sort in AppView

ui-v2/app/components/discovery-chain/index.hbs

@@ -135,7 +135,7 @@
       {{/if}}
     {{/each}}
   </svg>
-  <div class={{concat 'tooltip' (if activeTooltip ' active' '')}} style={{{ concat 'position: absolute;top:' y 'px;left:' x 'px;'}}}>
+  <div class={{concat 'tooltip' (if activeTooltip ' active' '')}} style={{{ concat 'top:' y 'px;left:' x 'px;'}}}>
     <span role="tooltip">{{round tooltip decimals=2}}%</span>
   </div>
 {{/if}}

ui-v2/app/components/discovery-chain/index.js

@@ -177,8 +177,8 @@ export default Component.extend({
   actions: {
     showSplit: function(e) {
       this.setProperties({
-        x: e.offsetX,
-        y: e.offsetY - 5,
+        x: e.clientX,
+        y: e.clientY - 3,
         tooltip: e.target.dataset.percentage,
         activeTooltip: true,
       });

ui-v2/app/styles/base/components/tooltip/layout.scss

@@ -55,4 +55,5 @@
 .ember-tooltip {
   padding: 12px;
   max-width: 192px;
+  z-index: 4;
 }

ui-v2/app/styles/components/discovery-chain/layout.scss

@@ -25,6 +25,10 @@
 %discovery-chain [id*=':']:not(path):hover {
   @extend %chain-node-active;
 }
+%discovery-chain .tooltip {
+  position: fixed;
+  z-index: 5;
+}
 %discovery-chain .tooltip.active > [role='tooltip'],
 %discovery-chain .tooltip.active > [role='tooltip']::after {
   @extend %blink-in-fade-out-active;