diff --git a/apps/web/src/components/Schedules/index.tsx b/apps/web/src/components/Schedules/index.tsx
index 49f12550..6ce36d87 100644
--- a/apps/web/src/components/Schedules/index.tsx
+++ b/apps/web/src/components/Schedules/index.tsx
@@ -19,7 +19,7 @@ import cronstrue from 'cronstrue'
import { useSchedules } from '@/hooks/useSchedules'
import AddScheduleForm from './AddScheduleForm'
import { ChevronDoubleRightIcon } from '@heroicons/react/24/outline'
-import { Tooltip } from '../Tooltips'
+import { PortalTooltip, Tooltip } from '../Tooltips'
import ScrollBar from '../ScrollBar'
interface Props {
@@ -139,17 +139,22 @@ const CronSchedule = ({ schedule }: { schedule: CronSchedule }) => {
return (
-
-
Cron:
+
+
Cron:
{cron}
-
-
-
-
- {tooltipText}
-
+
+
+ {tooltipText}
+
+ }
+ >
+
+
diff --git a/apps/web/src/components/Tooltips.tsx b/apps/web/src/components/Tooltips.tsx
index d941bcf2..38479907 100644
--- a/apps/web/src/components/Tooltips.tsx
+++ b/apps/web/src/components/Tooltips.tsx
@@ -63,11 +63,18 @@ interface PortalTooltipProps {
className?: string
children: React.ReactNode
content: React.ReactNode
+ ignoreScrollableAncestor?: boolean
}
export function PortalTooltip(props: PortalTooltipProps) {
const ref = useRef(null)
const [active, setActive] = useState(false)
- const { onOpen, dropdownPosition } = useDropdownPosition(ref, 'top')
+ const { onOpen, dropdownPosition } = useDropdownPosition(
+ ref,
+ 'top',
+ 0,
+ 0,
+ props.ignoreScrollableAncestor
+ )
useEffect(() => {
if (active) {
onOpen()
diff --git a/apps/web/src/hooks/dropdownPosition.ts b/apps/web/src/hooks/dropdownPosition.ts
index 2100c7da..e1c4ff60 100644
--- a/apps/web/src/hooks/dropdownPosition.ts
+++ b/apps/web/src/hooks/dropdownPosition.ts
@@ -4,7 +4,8 @@ function useDropdownPosition(
buttonRef: React.RefObject,
anchor: 'top' | 'bottom' = 'bottom',
paddingX = 0,
- paddingY = 0
+ paddingY = 0,
+ ignoreScrollableAncestor = false
) {
const [dropdownPosition, setDropdownPosition] = useState({
top: 0,
@@ -28,7 +29,7 @@ function useDropdownPosition(
currentButtonRef.closest('.overflow-scroll') ??
currentButtonRef.closest('.overflow-auto')
- if (scrollableAncestor) {
+ if (!ignoreScrollableAncestor && scrollableAncestor) {
const scrollableRect = scrollableAncestor.getBoundingClientRect()
setDropdownPosition({