From 474450d07a1e403ee298795658d080e7a48d9cb4 Mon Sep 17 00:00:00 2001
From: George Drummond <george-ctr@friends.dds.mil>
Date: Mon, 18 Feb 2019 10:59:22 -0500
Subject: [PATCH 1/2] Revert "Fix z-index of tooltip arrow"

This reverts commit ee7ad23dde8afd227e02027185cf617c87d68ec4.
---
 styles/elements/_tooltip.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/styles/elements/_tooltip.scss b/styles/elements/_tooltip.scss
index 76a1be50..d444826f 100644
--- a/styles/elements/_tooltip.scss
+++ b/styles/elements/_tooltip.scss
@@ -8,8 +8,6 @@
     background-color: $color-aqua-lightest;
     padding: $gap * 3;
     border-left: ($gap / 2) solid $color-blue;
-    position: relative;
-    z-index: 2;
   }
 
   .tooltip-arrow {

From 93a118d4343026d3062fb202d9b807a57e9055db Mon Sep 17 00:00:00 2001
From: George Drummond <george-ctr@friends.dds.mil>
Date: Mon, 18 Feb 2019 11:18:38 -0500
Subject: [PATCH 2/2] Use Tooltip component and fix overflow

---
 styles/components/_portfolio_layout.scss |  4 ++++
 templates/portfolios/header.html         | 10 +++++++---
 translations.yaml                        |  2 ++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss
index 080d6d8d..e53d0c83 100644
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@@ -65,6 +65,10 @@
 
   margin: 2 * $gap;
 
+  .col--grow {
+    overflow: inherit;
+  }
+
   .portfolio-header__name {
     @include h1;
   }
diff --git a/templates/portfolios/header.html b/templates/portfolios/header.html
index 7809f8a0..1af5dbd5 100644
--- a/templates/portfolios/header.html
+++ b/templates/portfolios/header.html
@@ -1,4 +1,5 @@
 {% from "components/icon.html" import Icon %}
+{% from "components/tooltip.html" import Tooltip %}
 
 {% macro Link(icon, text, url, active=False) %}
   <a class='icon-link {{ "active icon-link--disabled" if active }}' href='{{ url }}'>
@@ -17,9 +18,12 @@
     <div class='portfolio-header__budget row'>
       <div class='column-left'>
         <span>Available budget</span>
-        <button type="button" tabindex="0" class="icon-tooltip" v-tooltip.right="{content: 'The available budget shown includes the available budget of all active task orders', container: false}">
-          {{ Icon('info') }}
-        </button>
+        {{
+          Tooltip(
+            ('portfolios.task_orders.available_budget_help_description' | translate),
+            title=''
+          )
+        }}
       </div>
       <div class='portfolio-header__budget--amount'>
         <span class='portfolio-header__budget--dollars'>
diff --git a/translations.yaml b/translations.yaml
index d9512816..4547e4fb 100644
--- a/translations.yaml
+++ b/translations.yaml
@@ -510,6 +510,8 @@ task_orders:
     review_title: Task Order Builder
     task_order_information: Task Order Information
 portfolios:
+  task_orders:
+    available_budget_help_description: The available budget shown includes the available budget of all active task orders
   index:
     empty:
       title: You have no apps yet