Use Tooltip component and fix overflow

styles/components/_portfolio_layout.scss

@@ -65,6 +65,10 @@
 
   margin: 2 * $gap;
 
+  .col--grow {
+    overflow: inherit;
+  }
+
   .portfolio-header__name {
     @include h1;
   }

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'>

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