tooltip now displays to the right with bottom as a fallback

ilios · Jul 18, 2024 · e875602 · e875602
1 parent 62386cb
commit e875602
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/packages/ilios-common/addon/components/ics-feed.hbs b/packages/ilios-common/addon/components/ics-feed.hbs
@@ -15,7 +15,11 @@
     <FaIcon @icon="square-rss" />
   </CopyButton>
   {{#if (and this.copyButton this.showTooltip)}}
-    <IliosTooltip @target={{this.copyButton}}>
+    <IliosTooltip
+      @target={{this.copyButton}}
+      @options={{this.popperOptions}}
+      class="ics-feed-tooltip"
+    >
       {{t "general.copyIcsFeedUrl"}}
     </IliosTooltip>
   {{/if}}

diff --git a/packages/ilios-common/addon/components/ics-feed.js b/packages/ilios-common/addon/components/ics-feed.js
@@ -8,4 +8,16 @@ export default class IcsFeedComponent extends Component {
   textCopied = restartableTask(async () => {
     this.flashMessages.success('general.copiedIcsFeedUrl');
   });
+
+  popperOptions = {
+    placement: 'right',
+    modifiers: [
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: ['bottom'],
+        },
+      },
+    ],
+  };
 }
diff --git a/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss b/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss
@@ -64,11 +64,3 @@
     }
   }
 }
-
-// tooltips are outside the document flow so have to be styled outside the component
-.ics-feed-display-success-message-tooltip {
-  padding: 0;
-  &.ilios-tooltip .content {
-    max-width: 100%;
-  }
-}
diff --git a/packages/ilios-common/app/styles/ilios-common/components/ilios-tooltip.scss b/packages/ilios-common/app/styles/ilios-common/components/ilios-tooltip.scss
@@ -38,7 +38,17 @@
     right: -4px;
   }
 
+  &[data-popper-placement^="right"] {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   &[data-popper-placement^="right"] .arrow {
     left: -4px;
   }
 }
+
+// tooltips are outside the document flow so have to be styled outside the component
+.ilios-tooltip.ics-feed-tooltip .content {
+  max-width: 100%;
+}