From ad9f118d1484caa247b0a6b76f2573b649101504 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Wed, 26 Aug 2020 10:05:09 -0400
Subject: [PATCH] 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          | 2 +-
 ui-v2/app/components/discovery-chain/index.js           | 4 ++--
 ui-v2/app/styles/base/components/tooltip/layout.scss    | 1 +
 ui-v2/app/styles/components/discovery-chain/layout.scss | 4 ++++
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/ui-v2/app/components/discovery-chain/index.hbs b/ui-v2/app/components/discovery-chain/index.hbs
index 838d311ca6..60564889f1 100644
--- a/ui-v2/app/components/discovery-chain/index.hbs
+++ b/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}}
diff --git a/ui-v2/app/components/discovery-chain/index.js b/ui-v2/app/components/discovery-chain/index.js
index 7cf7863116..d9099e7888 100644
--- a/ui-v2/app/components/discovery-chain/index.js
+++ b/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,
       });
diff --git a/ui-v2/app/styles/base/components/tooltip/layout.scss b/ui-v2/app/styles/base/components/tooltip/layout.scss
index 321b8b5e30..728b1f9fe2 100644
--- a/ui-v2/app/styles/base/components/tooltip/layout.scss
+++ b/ui-v2/app/styles/base/components/tooltip/layout.scss
@@ -55,4 +55,5 @@
 .ember-tooltip {
   padding: 12px;
   max-width: 192px;
+  z-index: 4;
 }
diff --git a/ui-v2/app/styles/components/discovery-chain/layout.scss b/ui-v2/app/styles/components/discovery-chain/layout.scss
index 96449c8a17..f1da3118f6 100644
--- a/ui-v2/app/styles/components/discovery-chain/layout.scss
+++ b/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;