From ee59c6a074c67b8686154b2a8d1a58b18c79ecbe Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 3 Oct 2024 02:03:12 -0600
Subject: [PATCH 01/12] Updated view only verbage.  Tooltip mods

---
 src/registrar/assets/js/uswds-edited.js       | 24 ++++++++++++++----
 .../assets/sass/_theme/_tooltips.scss         | 25 +++++++++++++++++++
 src/registrar/templates/domain_detail.html    |  3 ++-
 src/registrar/tests/test_views_domain.py      |  2 +-
 4 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js
index e73f3b6c0..c01aabea3 100644
--- a/src/registrar/assets/js/uswds-edited.js
+++ b/src/registrar/assets/js/uswds-edited.js
@@ -5938,6 +5938,10 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     return offset;
   };
 
+  const element_is_fixed_positioned = false
+  const parentRect = tooltipTrigger.getBoundingClientRect();
+  const element_left = element_is_fixed_positioned ? parentRect.left + parentRect.width : `50%`
+
   /**
    * Positions tooltip at the top
    * @param {HTMLElement} e - this is the tooltip body
@@ -5949,7 +5953,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
     const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
     setPositionClass("top");
-    e.style.left = `50%`; // center the element
+    e.style.left = element_left; // center the element
     e.style.top = `-${TRIANGLE_SIZE}px`; // consider the pseudo element
     // apply our margins based on the offset
     e.style.margin = `-${topMargin}px 0 0 -${leftMargin / 2}px`;
@@ -5963,7 +5967,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     resetPositionStyles(e);
     const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
     setPositionClass("bottom");
-    e.style.left = `50%`;
+    e.style.left = element_left;
     e.style.margin = `${TRIANGLE_SIZE}px 0 0 -${leftMargin / 2}px`;
   };
 
@@ -5975,7 +5979,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     resetPositionStyles(e);
     const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
     setPositionClass("right");
-    e.style.top = `50%`;
+    e.style.top = element_left;
     e.style.left = `${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`;
     e.style.margin = `-${topMargin / 2}px 0 0 0`;
   };
@@ -5991,7 +5995,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     // we have to check for some utility margins
     const leftMargin = calculateMarginOffset("left", tooltipTrigger.offsetLeft > e.offsetWidth ? tooltipTrigger.offsetLeft - e.offsetWidth : e.offsetWidth, tooltipTrigger);
     setPositionClass("left");
-    e.style.top = `50%`;
+    e.style.top = element_left;
     e.style.left = `-${TRIANGLE_SIZE}px`;
     e.style.margin = `-${topMargin / 2}px 0 0 ${tooltipTrigger.offsetLeft > e.offsetWidth ? leftMargin : -leftMargin}px`; // adjust the margin
   };
@@ -6017,6 +6021,10 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
       if (i < positions.length) {
         const pos = positions[i];
         pos(element);
+        
+        const rect = element.getBoundingClientRect();
+        console.log("***RECTANGLE**** "+rect.width);
+
         if (!isElementInViewport(element)) {
           // eslint-disable-next-line no-param-reassign
           tryPositions(i += 1);
@@ -6128,7 +6136,13 @@ const setUpAttributes = tooltipTrigger => {
   tooltipBody.setAttribute("aria-hidden", "true");
 
   // place the text in the tooltip
-  tooltipBody.textContent = tooltipContent;
+  // DOTGOV: nest elements for tooltip to prevent clipping (works around viewport calcs)
+   tooltipBody.innerHTML = `
+    <p>
+      ${tooltipContent}
+    </p>`
+  // tooltipBody.textContent = tooltipContent;
+
   return {
     tooltipBody,
     position,
diff --git a/src/registrar/assets/sass/_theme/_tooltips.scss b/src/registrar/assets/sass/_theme/_tooltips.scss
index 3ab630dc0..dc1309ad2 100644
--- a/src/registrar/assets/sass/_theme/_tooltips.scss
+++ b/src/registrar/assets/sass/_theme/_tooltips.scss
@@ -28,3 +28,28 @@
 #extended-logo .usa-tooltip__body {
   font-weight: 400 !important;
 }
+
+.usa-tooltip__body > p {
+  margin-top: 0;
+  width: 40vw;
+  text-wrap: wrap;
+  text-align: center;
+  font-size: .9rem;
+  margin-block-start: 0em;
+  margin-block-end: 0em;
+  max-width: fit-content;
+  @include at-media('tablet') {
+    width: 70vw;
+  }
+}
+
+.usa-tooltip__body {
+  white-space: inherit;
+  max-width: fit-content;
+  // position: fixed;
+}
+
+.usa-tooltip__body--wrap {
+  min-width: inherit;
+  width: inherit;
+}
\ No newline at end of file
diff --git a/src/registrar/templates/domain_detail.html b/src/registrar/templates/domain_detail.html
index dca68f6ef..5cb559a5a 100644
--- a/src/registrar/templates/domain_detail.html
+++ b/src/registrar/templates/domain_detail.html
@@ -45,7 +45,8 @@ <h2 class="text-bold text-primary-dark domain-name-wrap">{{ domain.name }}</h2>
     <div class="usa-alert usa-alert--info usa-alert--slim">
       <div class="usa-alert__body">
         <p class="usa-alert__text ">
-          To manage information for this domain, you must add yourself as a domain manager.
+          You don't have access to manage {{domain.name}}. If you need to make updates, contact one of the listed domain managers.
+          Alternatively, an admin for your organization can assign this domain to you by updating your member permissions.
         </p>
       </div>
     </div>
diff --git a/src/registrar/tests/test_views_domain.py b/src/registrar/tests/test_views_domain.py
index 8fb92df72..aa2fc10c0 100644
--- a/src/registrar/tests/test_views_domain.py
+++ b/src/registrar/tests/test_views_domain.py
@@ -340,7 +340,7 @@ def test_domain_readonly_on_detail_page(self):
         detail_page = self.client.get(f"/domain/{domain.id}")
         # Check that alert message displays properly
         self.assertContains(
-            detail_page, "To manage information for this domain, you must add yourself as a domain manager."
+            detail_page, "You don't have access to manage "+domain.name+". If you need to make updates, contact one of the listed domain managers."
         )
         # Check that user does not have option to Edit domain
         self.assertNotContains(detail_page, "Edit")

From 64b7a5a953a5715ac5dd7ef4a4c261b3c542f7db Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 3 Oct 2024 02:45:52 -0600
Subject: [PATCH 02/12] Fixed position mode (works around overflow constraints
 with scrollable containers)

---
 src/registrar/assets/js/uswds-edited.js       | 26 ++++++++++++++-----
 .../assets/sass/_theme/_tooltips.scss         |  2 +-
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js
index c01aabea3..928e3fc2b 100644
--- a/src/registrar/assets/js/uswds-edited.js
+++ b/src/registrar/assets/js/uswds-edited.js
@@ -5938,9 +5938,17 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     return offset;
   };
 
-  const element_is_fixed_positioned = false
+  const style = window.getComputedStyle(tooltipBody);
+  // Check if the position property is 'fixed'
+  if (style.position === 'fixed') {
+      console.log('The element has a fixed position.');
+  } else {
+      console.log('The element does not have a fixed position.');
+  }
+  const element_is_fixed_positioned = style.position === 'fixed';
   const parentRect = tooltipTrigger.getBoundingClientRect();
-  const element_left = element_is_fixed_positioned ? parentRect.left + parentRect.width : `50%`
+  const element_left = element_is_fixed_positioned ? parentRect.left + parentRect.width/2 + 'px': `50%`
+  const element_top = element_is_fixed_positioned ? parentRect.top + parentRect.height/2 + 'px': `50%`
 
   /**
    * Positions tooltip at the top
@@ -5954,7 +5962,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
     setPositionClass("top");
     e.style.left = element_left; // center the element
-    e.style.top = `-${TRIANGLE_SIZE}px`; // consider the pseudo element
+    e.style.top = element_is_fixed_positioned ?`${parentRect.top-TRIANGLE_SIZE}px`:`-${TRIANGLE_SIZE}px`; // consider the pseudo element
     // apply our margins based on the offset
     e.style.margin = `-${topMargin}px 0 0 -${leftMargin / 2}px`;
   };
@@ -5967,6 +5975,9 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     resetPositionStyles(e);
     const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
     setPositionClass("bottom");
+    if (element_is_fixed_positioned){
+      e.style.top = parentRect.bottom+'px';
+    }
     e.style.left = element_left;
     e.style.margin = `${TRIANGLE_SIZE}px 0 0 -${leftMargin / 2}px`;
   };
@@ -5979,8 +5990,9 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     resetPositionStyles(e);
     const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
     setPositionClass("right");
-    e.style.top = element_left;
-    e.style.left = `${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`;
+    e.style.top = element_top;
+    e.style.left = element_is_fixed_positioned ? `${parentRect.right + TRIANGLE_SIZE}px`:`${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`;
+;
     e.style.margin = `-${topMargin / 2}px 0 0 0`;
   };
 
@@ -5995,8 +6007,8 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     // we have to check for some utility margins
     const leftMargin = calculateMarginOffset("left", tooltipTrigger.offsetLeft > e.offsetWidth ? tooltipTrigger.offsetLeft - e.offsetWidth : e.offsetWidth, tooltipTrigger);
     setPositionClass("left");
-    e.style.top = element_left;
-    e.style.left = `-${TRIANGLE_SIZE}px`;
+    e.style.top = element_top;
+    e.style.left = element_is_fixed_positioned ? `${parentRect.left-TRIANGLE_SIZE}px` : `-${TRIANGLE_SIZE}px`;
     e.style.margin = `-${topMargin / 2}px 0 0 ${tooltipTrigger.offsetLeft > e.offsetWidth ? leftMargin : -leftMargin}px`; // adjust the margin
   };
 
diff --git a/src/registrar/assets/sass/_theme/_tooltips.scss b/src/registrar/assets/sass/_theme/_tooltips.scss
index dc1309ad2..66706ccb4 100644
--- a/src/registrar/assets/sass/_theme/_tooltips.scss
+++ b/src/registrar/assets/sass/_theme/_tooltips.scss
@@ -46,7 +46,7 @@
 .usa-tooltip__body {
   white-space: inherit;
   max-width: fit-content;
-  // position: fixed;
+  position: fixed;
 }
 
 .usa-tooltip__body--wrap {

From e57cf6e39a33f1a44838b66dcfeb26ade346dbf2 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 3 Oct 2024 02:53:05 -0600
Subject: [PATCH 03/12] some cleanup

---
 src/registrar/assets/js/uswds-edited.js       | 26 +++++++------------
 .../assets/sass/_theme/_tooltips.scss         |  2 +-
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js
index 928e3fc2b..a1eff9a12 100644
--- a/src/registrar/assets/js/uswds-edited.js
+++ b/src/registrar/assets/js/uswds-edited.js
@@ -5938,17 +5938,11 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     return offset;
   };
 
-  const style = window.getComputedStyle(tooltipBody);
-  // Check if the position property is 'fixed'
-  if (style.position === 'fixed') {
-      console.log('The element has a fixed position.');
-  } else {
-      console.log('The element does not have a fixed position.');
-  }
-  const element_is_fixed_positioned = style.position === 'fixed';
-  const parentRect = tooltipTrigger.getBoundingClientRect();
-  const element_left = element_is_fixed_positioned ? parentRect.left + parentRect.width/2 + 'px': `50%`
-  const element_top = element_is_fixed_positioned ? parentRect.top + parentRect.height/2 + 'px': `50%`
+  const tooltipStyle = window.getComputedStyle(tooltipBody);
+  const tooltipIsFixedPositioned = tooltipStyle.position === 'fixed';
+  const triggerRect = tooltipTrigger.getBoundingClientRect();
+  const element_left = tooltipIsFixedPositioned ? triggerRect.left + triggerRect.width/2 + 'px': `50%`
+  const element_top = tooltipIsFixedPositioned ? triggerRect.top + triggerRect.height/2 + 'px': `50%`
 
   /**
    * Positions tooltip at the top
@@ -5962,7 +5956,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
     setPositionClass("top");
     e.style.left = element_left; // center the element
-    e.style.top = element_is_fixed_positioned ?`${parentRect.top-TRIANGLE_SIZE}px`:`-${TRIANGLE_SIZE}px`; // consider the pseudo element
+    e.style.top = tooltipIsFixedPositioned ?`${triggerRect.top-TRIANGLE_SIZE}px`:`-${TRIANGLE_SIZE}px`; // consider the pseudo element
     // apply our margins based on the offset
     e.style.margin = `-${topMargin}px 0 0 -${leftMargin / 2}px`;
   };
@@ -5975,8 +5969,8 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     resetPositionStyles(e);
     const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
     setPositionClass("bottom");
-    if (element_is_fixed_positioned){
-      e.style.top = parentRect.bottom+'px';
+    if (tooltipIsFixedPositioned){
+      e.style.top = triggerRect.bottom+'px';
     }
     e.style.left = element_left;
     e.style.margin = `${TRIANGLE_SIZE}px 0 0 -${leftMargin / 2}px`;
@@ -5991,7 +5985,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
     setPositionClass("right");
     e.style.top = element_top;
-    e.style.left = element_is_fixed_positioned ? `${parentRect.right + TRIANGLE_SIZE}px`:`${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`;
+    e.style.left = tooltipIsFixedPositioned ? `${triggerRect.right + TRIANGLE_SIZE}px`:`${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`;
 ;
     e.style.margin = `-${topMargin / 2}px 0 0 0`;
   };
@@ -6008,7 +6002,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     const leftMargin = calculateMarginOffset("left", tooltipTrigger.offsetLeft > e.offsetWidth ? tooltipTrigger.offsetLeft - e.offsetWidth : e.offsetWidth, tooltipTrigger);
     setPositionClass("left");
     e.style.top = element_top;
-    e.style.left = element_is_fixed_positioned ? `${parentRect.left-TRIANGLE_SIZE}px` : `-${TRIANGLE_SIZE}px`;
+    e.style.left = tooltipIsFixedPositioned ? `${triggerRect.left-TRIANGLE_SIZE}px` : `-${TRIANGLE_SIZE}px`;
     e.style.margin = `-${topMargin / 2}px 0 0 ${tooltipTrigger.offsetLeft > e.offsetWidth ? leftMargin : -leftMargin}px`; // adjust the margin
   };
 
diff --git a/src/registrar/assets/sass/_theme/_tooltips.scss b/src/registrar/assets/sass/_theme/_tooltips.scss
index 66706ccb4..20834f2aa 100644
--- a/src/registrar/assets/sass/_theme/_tooltips.scss
+++ b/src/registrar/assets/sass/_theme/_tooltips.scss
@@ -31,7 +31,7 @@
 
 .usa-tooltip__body > p {
   margin-top: 0;
-  width: 40vw;
+  width: 50vw;
   text-wrap: wrap;
   text-align: center;
   font-size: .9rem;

From 31df8d9781843558c56f2f667d7654a6aaa63b78 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 3 Oct 2024 11:53:48 -0600
Subject: [PATCH 04/12] Cleanup and comments

---
 src/registrar/assets/js/uswds-edited.js       | 39 +++++++-----
 .../assets/sass/_theme/_tooltips.scss         | 62 ++++++++++++-------
 2 files changed, 64 insertions(+), 37 deletions(-)

diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js
index a1eff9a12..013c224be 100644
--- a/src/registrar/assets/js/uswds-edited.js
+++ b/src/registrar/assets/js/uswds-edited.js
@@ -5938,12 +5938,21 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     return offset;
   };
 
+  /*
+   DOTGOV: Added calculations to allow flexible position settings of tooltip
+   */
   const tooltipStyle = window.getComputedStyle(tooltipBody);
   const tooltipIsFixedPositioned = tooltipStyle.position === 'fixed';
-  const triggerRect = tooltipTrigger.getBoundingClientRect();
-  const element_left = tooltipIsFixedPositioned ? triggerRect.left + triggerRect.width/2 + 'px': `50%`
-  const element_top = tooltipIsFixedPositioned ? triggerRect.top + triggerRect.height/2 + 'px': `50%`
-
+  const triggerRect = tooltipTrigger.getBoundingClientRect(); //detect if tooltip is set to "fixed" position
+  const targetLeft = tooltipIsFixedPositioned ? triggerRect.left + triggerRect.width/2 + 'px': `50%`
+  const targetTop = tooltipIsFixedPositioned ? triggerRect.top + triggerRect.height/2 + 'px': `50%`
+  if (tooltipIsFixedPositioned) {
+    // DOTGOV: Add listener to handle scrolling if tooltip position = 'fixed'
+    // (so that the tooltip doesn't appear to stick to the screen)
+    window.addEventListener('scroll', function() {
+      findBestPosition(tooltipBody)
+    });
+  }
   /**
    * Positions tooltip at the top
    * @param {HTMLElement} e - this is the tooltip body
@@ -5955,7 +5964,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
     const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
     setPositionClass("top");
-    e.style.left = element_left; // center the element
+    e.style.left = targetLeft; // center the element
     e.style.top = tooltipIsFixedPositioned ?`${triggerRect.top-TRIANGLE_SIZE}px`:`-${TRIANGLE_SIZE}px`; // consider the pseudo element
     // apply our margins based on the offset
     e.style.margin = `-${topMargin}px 0 0 -${leftMargin / 2}px`;
@@ -5972,7 +5981,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     if (tooltipIsFixedPositioned){
       e.style.top = triggerRect.bottom+'px';
     }
-    e.style.left = element_left;
+    e.style.left = targetLeft;
     e.style.margin = `${TRIANGLE_SIZE}px 0 0 -${leftMargin / 2}px`;
   };
 
@@ -5984,7 +5993,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     resetPositionStyles(e);
     const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
     setPositionClass("right");
-    e.style.top = element_top;
+    e.style.top = targetTop;
     e.style.left = tooltipIsFixedPositioned ? `${triggerRect.right + TRIANGLE_SIZE}px`:`${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`;
 ;
     e.style.margin = `-${topMargin / 2}px 0 0 0`;
@@ -6001,7 +6010,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     // we have to check for some utility margins
     const leftMargin = calculateMarginOffset("left", tooltipTrigger.offsetLeft > e.offsetWidth ? tooltipTrigger.offsetLeft - e.offsetWidth : e.offsetWidth, tooltipTrigger);
     setPositionClass("left");
-    e.style.top = element_top;
+    e.style.top = targetTop;
     e.style.left = tooltipIsFixedPositioned ? `${triggerRect.left-TRIANGLE_SIZE}px` : `-${TRIANGLE_SIZE}px`;
     e.style.margin = `-${topMargin / 2}px 0 0 ${tooltipTrigger.offsetLeft > e.offsetWidth ? leftMargin : -leftMargin}px`; // adjust the margin
   };
@@ -6027,9 +6036,6 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
       if (i < positions.length) {
         const pos = positions[i];
         pos(element);
-        
-        const rect = element.getBoundingClientRect();
-        console.log("***RECTANGLE**** "+rect.width);
 
         if (!isElementInViewport(element)) {
           // eslint-disable-next-line no-param-reassign
@@ -6142,11 +6148,14 @@ const setUpAttributes = tooltipTrigger => {
   tooltipBody.setAttribute("aria-hidden", "true");
 
   // place the text in the tooltip
-  // DOTGOV: nest elements for tooltip to prevent clipping (works around viewport calcs)
+  // DOTGOV: nest the text element within a paragraph to prevent clipping.
    tooltipBody.innerHTML = `
-    <p>
-      ${tooltipContent}
-    </p>`
+    <div class="usa-tooltip__content">
+      ${tooltipContent} 
+
+     n oainef aoieiu aw eghr hilabiuyabewisofuha libfasuiybefiae ruhawioeufh aiwfh iahf iuahefailusef aiwsfbali wefbaiue fbaliuefbalieuwfhauiowera jhfasiuf aiuwenail ewfasdn fiausfn iuafia ewfn ia fisfn iuf niuwnf iwenfailuhfiauefn aliefnaifnialsudnf aiufnailufnailefialenf ailefia fa filanf ilaefiunaifalfn ailfnialuefn ialuefnailf lifniasn filsa fnialn fila fi af ai fniaufn ilaufn ial fia fnila fiua fnilaefn ialuefn ial efailf ia fnial fia fniu ialf nailf a fal f Before this domain can be used, you’ll need to add name server addresses.
+    
+    </div>`
   // tooltipBody.textContent = tooltipContent;
 
   return {
diff --git a/src/registrar/assets/sass/_theme/_tooltips.scss b/src/registrar/assets/sass/_theme/_tooltips.scss
index 20834f2aa..862d43d3c 100644
--- a/src/registrar/assets/sass/_theme/_tooltips.scss
+++ b/src/registrar/assets/sass/_theme/_tooltips.scss
@@ -29,27 +29,45 @@
   font-weight: 400 !important;
 }
 
-.usa-tooltip__body > p {
-  margin-top: 0;
-  width: 50vw;
-  text-wrap: wrap;
-  text-align: center;
-  font-size: .9rem;
-  margin-block-start: 0em;
-  margin-block-end: 0em;
-  max-width: fit-content;
-  @include at-media('tablet') {
-    width: 70vw;
+.domains__table {
+  /*
+  Trick tooltips in the domains table to do 2 things...
+  1 - Shrink itself to a padded viewport window
+  (override width and wrapping properties in key areas to constrain tooltip size)
+  2 - NOT be clipped by the table's scrollable view
+  (Set tooltip position to "fixed", which prevents tooltip from being clipped by parent
+  containers. Fixed-position detection was added to uswds positioning logic to update positioning
+  calculations accordingly.)
+  */
+  .usa-tooltip__body {
+    white-space: inherit;
+    max-width: fit-content; // prevent adjusted widths from being larger than content
+    position: fixed; // prevents clipping by parent containers
+  }
+  /*
+  Override width adustments in this dynamically added class
+  (this is original to the javascript handler as a way to shrink tooltip contents within the viewport,
+  but is insufficient for our needs.  We cannot simply override its properties
+  because the logic surrounding its dynamic appearance in the DOM does not account
+  for parent containers (basically, this class isn't in the DOM when we need it).
+  Intercept .usa-tooltip__content instead and nullify the effects of
+  .usa-tooltip__body--wrap to prevent conflicts)
+  */
+  .usa-tooltip__body--wrap {
+    min-width: inherit;
+    width: inherit;
+  }
+  /*
+  Add width and wrapping to tooltip content in order to confine it to a smaller viewport window.
+  */
+  .usa-tooltip__content {
+    width: 50vw;
+    text-wrap: wrap;
+    text-align: center;
+    font-size: inherit; //inherit tooltip fontsize of .93rem
+    max-width: fit-content;
+    @include at-media('tablet') {
+      width: 70vw;
+    }
   }
-}
-
-.usa-tooltip__body {
-  white-space: inherit;
-  max-width: fit-content;
-  position: fixed;
-}
-
-.usa-tooltip__body--wrap {
-  min-width: inherit;
-  width: inherit;
 }
\ No newline at end of file

From 8c1d0430eb5d1be5d4164e30bfd6af8230c2f76e Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 3 Oct 2024 12:01:40 -0600
Subject: [PATCH 05/12] More comments

---
 src/registrar/assets/js/uswds-edited.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js
index 013c224be..49a87c4bd 100644
--- a/src/registrar/assets/js/uswds-edited.js
+++ b/src/registrar/assets/js/uswds-edited.js
@@ -25,6 +25,8 @@
 /**
  * Edits made for dotgov project:
  *  - tooltip exposed to window to be accessible in other js files
+ *  - tooltip postiioning logic updated to allow position:fixed
+ *  - tooltip dynamic content updated to include nested element (for better sizing control)
  *  - modal exposed to window to be accessible in other js files
  *  - fixed bug in createHeaderButton which added newlines to header button tooltips
  */
@@ -5939,7 +5941,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
   };
 
   /*
-   DOTGOV: Added calculations to allow flexible position settings of tooltip
+   DOTGOV: Tooltip postiioning logic updated to allow position:fixed
    */
   const tooltipStyle = window.getComputedStyle(tooltipBody);
   const tooltipIsFixedPositioned = tooltipStyle.position === 'fixed';
@@ -5964,8 +5966,10 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
     const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
     setPositionClass("top");
+
+    // DOTGOV: updated logic for position:fixed
     e.style.left = targetLeft; // center the element
-    e.style.top = tooltipIsFixedPositioned ?`${triggerRect.top-TRIANGLE_SIZE}px`:`-${TRIANGLE_SIZE}px`; // consider the pseudo element
+    e.style.top = tooltipIsFixedPositioned ?`${triggerRect.top-TRIANGLE_SIZE}px`:`-${TRIANGLE_SIZE}px`; // consider the pseudo element 
     // apply our margins based on the offset
     e.style.margin = `-${topMargin}px 0 0 -${leftMargin / 2}px`;
   };
@@ -5978,6 +5982,8 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     resetPositionStyles(e);
     const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
     setPositionClass("bottom");
+
+    // DOTGOV: updated logic for position:fixed
     if (tooltipIsFixedPositioned){
       e.style.top = triggerRect.bottom+'px';
     }
@@ -5993,6 +5999,8 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     resetPositionStyles(e);
     const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
     setPositionClass("right");
+
+    // DOTGOV: updated logic for position:fixed
     e.style.top = targetTop;
     e.style.left = tooltipIsFixedPositioned ? `${triggerRect.right + TRIANGLE_SIZE}px`:`${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`;
 ;
@@ -6010,6 +6018,8 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     // we have to check for some utility margins
     const leftMargin = calculateMarginOffset("left", tooltipTrigger.offsetLeft > e.offsetWidth ? tooltipTrigger.offsetLeft - e.offsetWidth : e.offsetWidth, tooltipTrigger);
     setPositionClass("left");
+
+    // DOTGOV: updated logic for position:fixed
     e.style.top = targetTop;
     e.style.left = tooltipIsFixedPositioned ? `${triggerRect.left-TRIANGLE_SIZE}px` : `-${TRIANGLE_SIZE}px`;
     e.style.margin = `-${topMargin / 2}px 0 0 ${tooltipTrigger.offsetLeft > e.offsetWidth ? leftMargin : -leftMargin}px`; // adjust the margin
@@ -6148,7 +6158,7 @@ const setUpAttributes = tooltipTrigger => {
   tooltipBody.setAttribute("aria-hidden", "true");
 
   // place the text in the tooltip
-  // DOTGOV: nest the text element within a paragraph to prevent clipping.
+  // DOTGOV: nest the text element to allow us creater control over width and wrapping behavior
    tooltipBody.innerHTML = `
     <div class="usa-tooltip__content">
       ${tooltipContent} 

From 7ced4b73e0f38fb3ee6a5ec9d1756bef68df130a Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 3 Oct 2024 15:52:26 -0600
Subject: [PATCH 06/12] linted + remove test content from tooltip

---
 src/registrar/assets/js/uswds-edited.js  | 5 +----
 src/registrar/tests/test_views_domain.py | 5 ++++-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js
index 49a87c4bd..11a71b0df 100644
--- a/src/registrar/assets/js/uswds-edited.js
+++ b/src/registrar/assets/js/uswds-edited.js
@@ -6161,10 +6161,7 @@ const setUpAttributes = tooltipTrigger => {
   // DOTGOV: nest the text element to allow us creater control over width and wrapping behavior
    tooltipBody.innerHTML = `
     <div class="usa-tooltip__content">
-      ${tooltipContent} 
-
-     n oainef aoieiu aw eghr hilabiuyabewisofuha libfasuiybefiae ruhawioeufh aiwfh iahf iuahefailusef aiwsfbali wefbaiue fbaliuefbalieuwfhauiowera jhfasiuf aiuwenail ewfasdn fiausfn iuafia ewfn ia fisfn iuf niuwnf iwenfailuhfiauefn aliefnaifnialsudnf aiufnailufnailefialenf ailefia fa filanf ilaefiunaifalfn ailfnialuefn ialuefnailf lifniasn filsa fnialn fila fi af ai fniaufn ilaufn ial fia fnila fiua fnilaefn ialuefn ial efailf ia fnial fia fniu ialf nailf a fal f Before this domain can be used, you’ll need to add name server addresses.
-    
+      ${tooltipContent}
     </div>`
   // tooltipBody.textContent = tooltipContent;
 
diff --git a/src/registrar/tests/test_views_domain.py b/src/registrar/tests/test_views_domain.py
index aa2fc10c0..928cea43e 100644
--- a/src/registrar/tests/test_views_domain.py
+++ b/src/registrar/tests/test_views_domain.py
@@ -340,7 +340,10 @@ def test_domain_readonly_on_detail_page(self):
         detail_page = self.client.get(f"/domain/{domain.id}")
         # Check that alert message displays properly
         self.assertContains(
-            detail_page, "You don't have access to manage "+domain.name+". If you need to make updates, contact one of the listed domain managers."
+            detail_page,
+            "You don't have access to manage "
+            + domain.name
+            + ". If you need to make updates, contact one of the listed domain managers.",
         )
         # Check that user does not have option to Edit domain
         self.assertNotContains(detail_page, "Edit")

From a4a83986388a9f15f3690b7eeee6d0052a21faa9 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Fri, 4 Oct 2024 13:32:47 -0600
Subject: [PATCH 07/12] Design updated implemented

---
 src/registrar/templates/domain_detail.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/registrar/templates/domain_detail.html b/src/registrar/templates/domain_detail.html
index 5cb559a5a..0fb29d2eb 100644
--- a/src/registrar/templates/domain_detail.html
+++ b/src/registrar/templates/domain_detail.html
@@ -46,7 +46,6 @@ <h2 class="text-bold text-primary-dark domain-name-wrap">{{ domain.name }}</h2>
       <div class="usa-alert__body">
         <p class="usa-alert__text ">
           You don't have access to manage {{domain.name}}. If you need to make updates, contact one of the listed domain managers.
-          Alternatively, an admin for your organization can assign this domain to you by updating your member permissions.
         </p>
       </div>
     </div>

From 2d88c340a78494d8cb355b245ee71d6d8ae94fb0 Mon Sep 17 00:00:00 2001
From: CuriousX <nicolle.leclair@gmail.com>
Date: Thu, 10 Oct 2024 21:34:52 -0600
Subject: [PATCH 08/12] Update src/registrar/assets/js/uswds-edited.js

Co-authored-by: Rachid Mrad <107004823+rachidatecs@users.noreply.github.com>
---
 src/registrar/assets/js/uswds-edited.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js
index 11a71b0df..a76bca276 100644
--- a/src/registrar/assets/js/uswds-edited.js
+++ b/src/registrar/assets/js/uswds-edited.js
@@ -25,7 +25,7 @@
 /**
  * Edits made for dotgov project:
  *  - tooltip exposed to window to be accessible in other js files
- *  - tooltip postiioning logic updated to allow position:fixed
+ *  - tooltip positioning logic updated to allow position:fixed
  *  - tooltip dynamic content updated to include nested element (for better sizing control)
  *  - modal exposed to window to be accessible in other js files
  *  - fixed bug in createHeaderButton which added newlines to header button tooltips

From d791960fd021ab4fa10f1e490cd98e8649e0937b Mon Sep 17 00:00:00 2001
From: CuriousX <nicolle.leclair@gmail.com>
Date: Thu, 10 Oct 2024 21:35:04 -0600
Subject: [PATCH 09/12] Update src/registrar/assets/js/uswds-edited.js

Co-authored-by: Rachid Mrad <107004823+rachidatecs@users.noreply.github.com>
---
 src/registrar/assets/js/uswds-edited.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js
index a76bca276..aee5f0552 100644
--- a/src/registrar/assets/js/uswds-edited.js
+++ b/src/registrar/assets/js/uswds-edited.js
@@ -5941,7 +5941,7 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
   };
 
   /*
-   DOTGOV: Tooltip postiioning logic updated to allow position:fixed
+   DOTGOV: Tooltip positioning logic updated to allow position:fixed
    */
   const tooltipStyle = window.getComputedStyle(tooltipBody);
   const tooltipIsFixedPositioned = tooltipStyle.position === 'fixed';

From c671c44cbf44484ab1c6481dc5ef4b992f31cb49 Mon Sep 17 00:00:00 2001
From: CuriousX <nicolle.leclair@gmail.com>
Date: Thu, 10 Oct 2024 21:35:11 -0600
Subject: [PATCH 10/12] Update src/registrar/assets/js/uswds-edited.js

Co-authored-by: Rachid Mrad <107004823+rachidatecs@users.noreply.github.com>
---
 src/registrar/assets/js/uswds-edited.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js
index aee5f0552..c699f14e6 100644
--- a/src/registrar/assets/js/uswds-edited.js
+++ b/src/registrar/assets/js/uswds-edited.js
@@ -6158,7 +6158,7 @@ const setUpAttributes = tooltipTrigger => {
   tooltipBody.setAttribute("aria-hidden", "true");
 
   // place the text in the tooltip
-  // DOTGOV: nest the text element to allow us creater control over width and wrapping behavior
+  // DOTGOV: nest the text element to allow us greater control over width and wrapping behavior
    tooltipBody.innerHTML = `
     <div class="usa-tooltip__content">
       ${tooltipContent}

From b34d4cc140f48e01a3b59afcd0860024bec5dedb Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 10 Oct 2024 22:10:11 -0600
Subject: [PATCH 11/12] implemented feedback

---
 src/registrar/assets/js/uswds-edited.js       | 41 +++++++++++++++----
 .../assets/sass/_theme/_tooltips.scss         |  2 +-
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js
index c699f14e6..42ca52b30 100644
--- a/src/registrar/assets/js/uswds-edited.js
+++ b/src/registrar/assets/js/uswds-edited.js
@@ -5940,21 +5940,22 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     return offset;
   };
 
-  /*
-   DOTGOV: Tooltip positioning logic updated to allow position:fixed
-   */
+  // ---- DOTGOV EDIT (Added section)
+  // DOTGOV: Tooltip positioning logic updated to allow position:fixed
   const tooltipStyle = window.getComputedStyle(tooltipBody);
   const tooltipIsFixedPositioned = tooltipStyle.position === 'fixed';
   const triggerRect = tooltipTrigger.getBoundingClientRect(); //detect if tooltip is set to "fixed" position
   const targetLeft = tooltipIsFixedPositioned ? triggerRect.left + triggerRect.width/2 + 'px': `50%`
   const targetTop = tooltipIsFixedPositioned ? triggerRect.top + triggerRect.height/2 + 'px': `50%`
   if (tooltipIsFixedPositioned) {
-    // DOTGOV: Add listener to handle scrolling if tooltip position = 'fixed'
-    // (so that the tooltip doesn't appear to stick to the screen)
+    /* DOTGOV: Add listener to handle scrolling if tooltip position = 'fixed'
+    (so that the tooltip doesn't appear to stick to the screen) */
     window.addEventListener('scroll', function() {
       findBestPosition(tooltipBody)
     });
   }
+  // ---- END DOTGOV EDIT
+
   /**
    * Positions tooltip at the top
    * @param {HTMLElement} e - this is the tooltip body
@@ -5967,9 +5968,15 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
     setPositionClass("top");
 
+    // ---- DOTGOV EDIT
+    // e.style.left = `50%`; // center the element
+    // e.style.top = `-${TRIANGLE_SIZE}px`; // consider the pseudo element
+
     // DOTGOV: updated logic for position:fixed
     e.style.left = targetLeft; // center the element
     e.style.top = tooltipIsFixedPositioned ?`${triggerRect.top-TRIANGLE_SIZE}px`:`-${TRIANGLE_SIZE}px`; // consider the pseudo element 
+    // ---- END DOTGOV EDIT
+
     // apply our margins based on the offset
     e.style.margin = `-${topMargin}px 0 0 -${leftMargin / 2}px`;
   };
@@ -5983,10 +5990,15 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     const leftMargin = calculateMarginOffset("left", e.offsetWidth, tooltipTrigger);
     setPositionClass("bottom");
 
+    // ---- DOTGOV EDIT
+    // e.style.left = `50%`;
+
     // DOTGOV: updated logic for position:fixed
     if (tooltipIsFixedPositioned){
       e.style.top = triggerRect.bottom+'px';
     }
+    // ---- END DOTGOV EDIT
+
     e.style.left = targetLeft;
     e.style.margin = `${TRIANGLE_SIZE}px 0 0 -${leftMargin / 2}px`;
   };
@@ -6000,10 +6012,15 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     const topMargin = calculateMarginOffset("top", e.offsetHeight, tooltipTrigger);
     setPositionClass("right");
 
+    // ---- DOTGOV EDIT
+    // e.style.top = `50%`;
+    // e.style.left = `${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`;
+
     // DOTGOV: updated logic for position:fixed
     e.style.top = targetTop;
     e.style.left = tooltipIsFixedPositioned ? `${triggerRect.right + TRIANGLE_SIZE}px`:`${tooltipTrigger.offsetLeft + tooltipTrigger.offsetWidth + TRIANGLE_SIZE}px`;
-;
+    // ---- END DOTGOV EDIT
+
     e.style.margin = `-${topMargin / 2}px 0 0 0`;
   };
 
@@ -6019,9 +6036,15 @@ const showToolTip = (tooltipBody, tooltipTrigger, position) => {
     const leftMargin = calculateMarginOffset("left", tooltipTrigger.offsetLeft > e.offsetWidth ? tooltipTrigger.offsetLeft - e.offsetWidth : e.offsetWidth, tooltipTrigger);
     setPositionClass("left");
 
+    // ---- DOTGOV EDIT
+    // e.style.top = `50%`;
+    // e.style.left = `-${TRIANGLE_SIZE}px`;
+
     // DOTGOV: updated logic for position:fixed
     e.style.top = targetTop;
     e.style.left = tooltipIsFixedPositioned ? `${triggerRect.left-TRIANGLE_SIZE}px` : `-${TRIANGLE_SIZE}px`;
+    // ---- END DOTGOV EDIT
+
     e.style.margin = `-${topMargin / 2}px 0 0 ${tooltipTrigger.offsetLeft > e.offsetWidth ? leftMargin : -leftMargin}px`; // adjust the margin
   };
 
@@ -6158,12 +6181,16 @@ const setUpAttributes = tooltipTrigger => {
   tooltipBody.setAttribute("aria-hidden", "true");
 
   // place the text in the tooltip
+  
+  // -- DOTGOV EDIT
+  // tooltipBody.textContent = tooltipContent;
+
   // DOTGOV: nest the text element to allow us greater control over width and wrapping behavior
    tooltipBody.innerHTML = `
     <div class="usa-tooltip__content">
       ${tooltipContent}
     </div>`
-  // tooltipBody.textContent = tooltipContent;
+  // -- END DOTGOV EDIT
 
   return {
     tooltipBody,
diff --git a/src/registrar/assets/sass/_theme/_tooltips.scss b/src/registrar/assets/sass/_theme/_tooltips.scss
index 862d43d3c..adb8f43a5 100644
--- a/src/registrar/assets/sass/_theme/_tooltips.scss
+++ b/src/registrar/assets/sass/_theme/_tooltips.scss
@@ -66,7 +66,7 @@
     text-align: center;
     font-size: inherit; //inherit tooltip fontsize of .93rem
     max-width: fit-content;
-    @include at-media('tablet') {
+    @include at-media('desktop') {
       width: 70vw;
     }
   }

From 5f55c6dc7d51e9e7640b926d072060ed8ad8f91c Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Tue, 15 Oct 2024 12:55:13 -0600
Subject: [PATCH 12/12] re-push feedback implementation

---
 src/registrar/assets/js/uswds-edited.js         | 4 ++--
 src/registrar/assets/sass/_theme/_tooltips.scss | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/registrar/assets/js/uswds-edited.js b/src/registrar/assets/js/uswds-edited.js
index 42ca52b30..52dc441fc 100644
--- a/src/registrar/assets/js/uswds-edited.js
+++ b/src/registrar/assets/js/uswds-edited.js
@@ -6187,9 +6187,9 @@ const setUpAttributes = tooltipTrigger => {
 
   // DOTGOV: nest the text element to allow us greater control over width and wrapping behavior
    tooltipBody.innerHTML = `
-    <div class="usa-tooltip__content">
+    <span class="usa-tooltip__content">
       ${tooltipContent}
-    </div>`
+    </span>`
   // -- END DOTGOV EDIT
 
   return {
diff --git a/src/registrar/assets/sass/_theme/_tooltips.scss b/src/registrar/assets/sass/_theme/_tooltips.scss
index adb8f43a5..58beb8ae6 100644
--- a/src/registrar/assets/sass/_theme/_tooltips.scss
+++ b/src/registrar/assets/sass/_theme/_tooltips.scss
@@ -69,5 +69,6 @@
     @include at-media('desktop') {
       width: 70vw;
     }
+    display: block;
   }
 }
\ No newline at end of file