diff --git a/packages/ilios-common/addon/components/ics-feed.hbs b/packages/ilios-common/addon/components/ics-feed.hbs
index 48c1dfa03b..243cea3f62 100644
--- a/packages/ilios-common/addon/components/ics-feed.hbs
+++ b/packages/ilios-common/addon/components/ics-feed.hbs
@@ -15,7 +15,11 @@
{{#if (and this.copyButton this.showTooltip)}}
-
+
{{t "general.copyIcsFeedUrl"}}
{{/if}}
diff --git a/packages/ilios-common/addon/components/ics-feed.js b/packages/ilios-common/addon/components/ics-feed.js
index abd5f3855a..65eacf3a9a 100644
--- 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
index d63a0ae5e4..ba8c2cfb83 100644
--- 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
index d3f560d150..d8dcf3f9b1 100644
--- 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%;
+}