Updated view only verbage. Tooltip mods

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,

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;
+}

src/registrar/templates/domain_detail.html

@@ -45,7 +45,8 @@
     <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>

src/registrar/tests/test_views_domain.py

@@ -340,7 +340,7 @@ class TestDomainDetail(TestDomainOverview):
         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")