Use dynamic z-index for tooltips too (#1883)

* Use Charlies dynamic z-index for tooltips too

* Share `usePopoverZIndex`

Author: benjaminleonard

libs/ui/lib/listbox/Listbox.tsx

@@ -17,10 +17,13 @@ import { Listbox as Select } from '@headlessui/react'
 import cn from 'classnames'
 import type { ReactNode } from 'react'
 
-import { FieldLabel, SelectArrows6Icon, SpinnerLoader, TextInputHint } from '@oxide/ui'
-
-import { useIsInModal } from '../modal/Modal'
-import { useIsInSideModal } from '../side-modal/SideModal'
+import {
+  FieldLabel,
+  SelectArrows6Icon,
+  SpinnerLoader,
+  TextInputHint,
+  usePopoverZIndex,
+} from '@oxide/ui'
 
 export type ListboxItem<Value extends string = string> = {
   value: Value
@@ -83,13 +86,7 @@ export const Listbox = <Value extends string = string>({
   const selectedItem = selected && items.find((i) => i.value === selected)
   const noItems = !isLoading && items.length === 0
   const isDisabled = disabled || noItems
-  const isInModal = useIsInModal()
-  const isInSideModal = useIsInSideModal()
-  const zIndex = isInModal
-    ? 'z-modalDropdown'
-    : isInSideModal
-      ? 'z-sideModalDropdown'
-      : 'z-contentDropdown'
+  const zIndex = usePopoverZIndex()
 
   return (
     <div className={cn('relative', className)}>

libs/ui/lib/side-modal/SideModal.tsx

@@ -11,7 +11,7 @@ import cn from 'classnames'
 import React, { createContext, useContext, useRef, type ReactNode } from 'react'
 
 import { Close12Icon, Error12Icon } from '@oxide/design-system/icons/react'
-import { Message } from '@oxide/ui'
+import { Message, useIsInModal } from '@oxide/ui'
 import { classed } from '@oxide/util'
 
 import { useIsOverflow } from 'app/hooks'
@@ -22,6 +22,16 @@ const SideModalContext = createContext(false)
 
 export const useIsInSideModal = () => useContext(SideModalContext)
 
+export function usePopoverZIndex() {
+  const isInModal = useIsInModal()
+  const isInSideModal = useIsInSideModal()
+  return isInModal
+    ? 'z-modalDropdown'
+    : isInSideModal
+      ? 'z-sideModalDropdown'
+      : 'z-contentDropdown'
+}
+
 export type SideModalProps = {
   title?: string
   subtitle?: ReactNode

libs/ui/lib/tooltip/Tooltip.tsx

@@ -32,6 +32,8 @@ import {
 } from 'react'
 import { mergeRefs } from 'react-merge-refs'
 
+import { usePopoverZIndex } from '@oxide/ui'
+
 import './tooltip.css'
 
 export interface TooltipProps {
@@ -83,14 +85,16 @@ export const Tooltip = forwardRef(
       ref: mergeRefs([refs.setReference, elRef]),
     })
 
+    const zIndex = usePopoverZIndex()
+
     return (
       <>
         {child}
         <FloatingPortal>
           {open && (
             <div
               ref={refs.setFloating}
-              className={cn('ox-tooltip max-content max-w-sm')}
+              className={cn('ox-tooltip max-content max-w-sm', zIndex)}
               {...getFloatingProps()}
               style={floatingStyles}
             >

libs/ui/lib/tooltip/tooltip.css

@@ -7,7 +7,7 @@
  */
 
 .ox-tooltip {
-  @apply z-20 rounded border p-2 text-sans-md text-secondary bg-raise border-secondary elevation-2;
+  @apply rounded border p-2 text-sans-md text-secondary bg-raise border-secondary elevation-2;
 }
 
 .ox-tooltip-arrow {