Merge pull request #4771 from kobotoolbox/fix-tooltip-container-overflow

Adjust anon submission tooltip layout issue
kobotoolbox · Dec 18, 2023 · 99a0c24 · 99a0c24
2 parents f930fb5 + f6deac7
commit 99a0c24
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/jsapp/js/components/anonymousSubmission.component.tsx b/jsapp/js/components/anonymousSubmission.component.tsx
@@ -22,6 +22,7 @@ export default function AnonymousSubmission(props: AnonymousSubmissionProps) {
       />
       <a
         href={envStore.data.support_url + HELP_ARTICLE_ANON_SUBMISSIONS_URL}
+        className='right-tooltip wrapped-tooltip'
         target='_blank'
         data-tip={t(
           'Allow anyone to see this form and add submissions. Click the icon to learn more.'

diff --git a/jsapp/js/components/anonymousSubmission.module.scss b/jsapp/js/components/anonymousSubmission.module.scss
@@ -9,5 +9,5 @@
 }
 
 a {
-  padding-left: sizes.$x8;
+  margin-left: sizes.$x8;
 }
diff --git a/jsapp/scss/components/_kobo.tooltips.scss b/jsapp/scss/components/_kobo.tooltips.scss
@@ -96,6 +96,12 @@ Additional class names:
     transform: translate(0);
   }
 
+  .wrapped-tooltip [data-tip]::after,
+  .wrapped-tooltip[data-tip]::after {
+    width: 300px;
+    white-space: normal;
+  }
+
   // more actions in asset-row adjustment
   .asset-row .popover-menu [data-tip]::after {
     left: -60%;