From c30713e98649882d8dfe2c5d423be56b15993900 Mon Sep 17 00:00:00 2001
From: Nina Andal Aarvik <nina@sanity.io>
Date: Mon, 30 Oct 2023 12:43:57 +0100
Subject: [PATCH] feat(facelift): create StudioUI tooltip with delay and
 replace (#5016)

* feat(facelift): create StudioUI tooltip with delay and replace

* fix(core/desk): use StudioUi Tooltip

* fix(core/desk): use Studio UI tooltip

* fix(core/desk): use StudioUI tooltip and remove paddings

* fix(core): use StudioUI tooltip for TooltipOfDisabled - ref prop error

* fix(src): fix studioUI tooltip to take strings and replace current tooltips with this logic

* fix(vision): change tooltip import path

* fix(src): fix up content in StudioUI tooltips, remove comment

* fix(core): add two arguments to forwardRef render function

* fix(test-studio): add custom badge to author schema type

* Update packages/sanity/src/ui/tooltip/Tooltip.tsx

Co-authored-by: Robin Pyon <robinpyon@users.noreply.github.com>

* refactor: slightly DRY tooltip component

---------

Co-authored-by: Robin Pyon <robinpyon@users.noreply.github.com>
Co-authored-by: Robin Pyon <robin.pyon@gmail.com>
---
 dev/test-studio/components/formComponents.tsx |  7 ++++
 dev/test-studio/sanity.config.ts              |  3 +-
 .../vision/src/components/VisionGui.tsx       | 24 +++--------
 .../InsufficientPermissionsMessage.tsx        |  2 +-
 .../src/core/components/StatusButton.tsx      | 23 ++---------
 .../src/core/components/TooltipOfDisabled.tsx | 14 +++----
 .../components/collapseMenu/CollapseMenu.tsx  | 14 ++-----
 .../collapseMenu/CollapseMenuButton.tsx       |  3 +-
 .../previews/general/MediaPreview.styled.ts   |  2 +-
 .../previews/general/MediaPreview.tsx         |  3 +-
 .../core/components/userAvatar/UserAvatar.tsx | 13 ++----
 .../field/diff/components/DiffTooltip.tsx     |  5 ++-
 .../formField/FormFieldValidationStatus.tsx   |  5 ++-
 .../CrossDatasetReferencePreview.tsx          | 15 ++++---
 .../customSchema/blockActions.tsx             | 13 ++----
 .../inputs/PortableText/object/Annotation.tsx |  4 +-
 .../PortableText/object/BlockObject.tsx       |  5 ++-
 .../PortableText/object/InlineObject.tsx      |  4 +-
 .../inputs/PortableText/text/TextBlock.tsx    |  5 ++-
 .../inputs/PortableText/toolbar/Toolbar.tsx   |  5 ++-
 .../inputs/ReferenceInput/CreateButton.tsx    | 15 ++-----
 .../ReferenceInput/PreviewReferenceValue.tsx  | 15 ++++---
 .../ReferenceInput/ReferencePreview.tsx       |  3 +-
 .../ArrayOfObjectsFunctions.tsx               | 22 ++--------
 .../ArrayOfPrimitivesFunctions.tsx            | 12 ++----
 .../core/form/studio/assetSource/AssetRow.tsx |  9 ++---
 .../core/presence/DocumentPreviewPresence.tsx |  5 ++-
 .../src/core/presence/PresenceTooltip.tsx     |  5 ++-
 .../studio/components/navbar/StudioNavbar.tsx |  2 -
 .../navbar/new-document/NewDocumentButton.tsx |  5 +--
 .../new-document/NewDocumentListOption.tsx    |  5 ++-
 .../navbar/resources/ResourcesButton.tsx      |  9 ++---
 .../filters/addFilter/items/FilterTooltip.tsx |  5 ++-
 .../addFilter/items/MenuItemFilter.tsx        | 22 +---------
 .../inputs/date/ParsedDateTextInput.tsx       |  3 +-
 .../searchResults/item/DebugOverlay.tsx       | 37 +++++++++--------
 .../components/navbar/userMenu/UserMenu.tsx   | 14 +------
 .../navbar/workspace/WorkspaceMenuButton.tsx  |  8 +---
 .../src/desk/components/DraftStatus.tsx       | 11 +----
 .../desk/components/NotPublishedStatus.tsx    |  3 +-
 .../src/desk/components/PublishedStatus.tsx   | 11 +----
 .../ConfirmDeleteDialogBody.styles.tsx        | 14 ++-----
 .../InsufficientPermissionsMessageTooltip.tsx | 13 ++----
 .../header/DocumentPanelHeader.tsx            | 14 ++-----
 .../document/statusBar/ActionMenuButton.tsx   | 12 ++----
 .../statusBar/DocumentStatusBarActions.tsx    |  7 ++--
 .../statusBar/sparkline/DocumentBadges.tsx    | 11 ++---
 .../statusBar/sparkline/PublishStatus.tsx     |  5 ++-
 .../ReviewChangesButton.tsx                   |  5 ++-
 packages/sanity/src/ui/tooltip/Tooltip.tsx    | 40 +++++++++++--------
 50 files changed, 184 insertions(+), 327 deletions(-)

diff --git a/dev/test-studio/components/formComponents.tsx b/dev/test-studio/components/formComponents.tsx
index 00a78fce7e5..0b970318189 100644
--- a/dev/test-studio/components/formComponents.tsx
+++ b/dev/test-studio/components/formComponents.tsx
@@ -78,6 +78,13 @@ export function Preview(props: PreviewProps) {
   )
 }
 
+export function CustomBadge() {
+  return {
+    label: 'Hello world',
+    title: 'Hello I am a custom document badge',
+  }
+}
+
 export const formComponentsPlugin = definePlugin({
   name: 'form-components-plugin',
   form: {
diff --git a/dev/test-studio/sanity.config.ts b/dev/test-studio/sanity.config.ts
index 2cc25ef766f..5671d7c51b4 100644
--- a/dev/test-studio/sanity.config.ts
+++ b/dev/test-studio/sanity.config.ts
@@ -26,6 +26,7 @@ import {
 import {
   Annotation,
   Block,
+  CustomBadge,
   Field,
   formComponentsPlugin,
   InlineBlock,
@@ -74,10 +75,10 @@ const sharedSettings = definePlugin({
       return prev
     },
     newDocumentOptions,
-
     unstable_comments: {
       enabled: true,
     },
+    badges: (prev, context) => (context.schemaType === 'author' ? [CustomBadge, ...prev] : prev),
   },
   plugins: [
     deskTool({
diff --git a/packages/@sanity/vision/src/components/VisionGui.tsx b/packages/@sanity/vision/src/components/VisionGui.tsx
index 7f82df3a6b6..7ac12827eff 100644
--- a/packages/@sanity/vision/src/components/VisionGui.tsx
+++ b/packages/@sanity/vision/src/components/VisionGui.tsx
@@ -13,12 +13,12 @@ import {
   Select,
   Text,
   TextInput,
-  Tooltip,
   Grid,
   Button,
   ToastContextValue,
   Inline,
 } from '@sanity/ui'
+import {Tooltip} from '../../../../sanity/src/ui'
 import {VisionCodeMirror} from '../codemirror/VisionCodeMirror'
 import {getLocalStorage, LocalStorageish} from '../util/localStorage'
 import {parseApiQueryString, ParsedApiQueryString} from '../util/parseApiQueryString'
@@ -754,13 +754,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                     <Box flex={1}>
                       <TextInput readOnly type="url" ref={this._operationUrlElement} value={url} />
                     </Box>
-                    <Tooltip
-                      content={
-                        <Box padding={2}>
-                          <Text>Copy to clipboard</Text>
-                        </Box>
-                      }
-                    >
+                    <Tooltip content="Copy to clipboard">
                       <Button
                         aria-label="Copy to clipboard"
                         type="button"
@@ -825,15 +819,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                       <Flex>
                         <StyledLabel muted>Params</StyledLabel>
                         {paramsError && (
-                          <Tooltip
-                            placement="top-end"
-                            portal
-                            content={
-                              <Box padding={2}>
-                                <Text>{paramsError}</Text>
-                              </Box>
-                            }
-                          >
+                          <Tooltip placement="top-end" portal content={paramsError}>
                             <Box padding={1} marginX={2}>
                               <Text>
                                 <ErrorOutlineIcon />
@@ -850,7 +836,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                     <Card padding={3} paddingX={3}>
                       <Tooltip
                         content={
-                          <Card padding={2} radius={4}>
+                          <Card radius={4}>
                             <Text size={1} muted>
                               Parameters are not valid JSON
                             </Text>
@@ -864,7 +850,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                           <Box flex={1}>
                             <Tooltip
                               content={
-                                <Card padding={2} radius={4}>
+                                <Card radius={4}>
                                   <Hotkeys keys={['Ctrl', 'Enter']} />
                                 </Card>
                               }
diff --git a/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx b/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx
index c763e32af26..650e8ff205b 100644
--- a/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx
+++ b/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx
@@ -22,7 +22,7 @@ export function InsufficientPermissionsMessage(props: InsufficientPermissionsMes
   const plural = roles.length !== 1
 
   return (
-    <Box padding={2}>
+    <Box>
       <Inline space={2}>
         <Text size={1}>
           <AccessDeniedIcon />
diff --git a/packages/sanity/src/core/components/StatusButton.tsx b/packages/sanity/src/core/components/StatusButton.tsx
index 399a9d96461..22c619e7d46 100644
--- a/packages/sanity/src/core/components/StatusButton.tsx
+++ b/packages/sanity/src/core/components/StatusButton.tsx
@@ -1,14 +1,4 @@
-import {
-  Box,
-  Button,
-  ButtonMode,
-  ButtonProps,
-  Flex,
-  Text,
-  Tooltip,
-  TooltipProps,
-  useTheme,
-} from '@sanity/ui'
+import {Box, Button, ButtonMode, ButtonProps, Flex, Hotkeys, Text, useTheme} from '@sanity/ui'
 import React, {
   createElement,
   isValidElement,
@@ -20,7 +10,7 @@ import React, {
 } from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
-import {Hotkeys} from './Hotkeys'
+import {Tooltip, TooltipProps} from '../../ui'
 
 /** @hidden @beta */
 export interface StatusButtonProps extends Omit<ButtonProps, 'iconRight'> {
@@ -79,14 +69,7 @@ export const StatusButton = forwardRef(function StatusButton(
     )
 
   return (
-    <Tooltip
-      padding={2}
-      placement="bottom"
-      {...tooltip}
-      content={tooltipContent}
-      disabled={!label}
-      portal
-    >
+    <Tooltip placement="bottom" {...tooltip} content={tooltipContent} disabled={!label} portal>
       <div>
         <Button
           data-ui="StatusButton"
diff --git a/packages/sanity/src/core/components/TooltipOfDisabled.tsx b/packages/sanity/src/core/components/TooltipOfDisabled.tsx
index f96240900ad..1a58473a39f 100644
--- a/packages/sanity/src/core/components/TooltipOfDisabled.tsx
+++ b/packages/sanity/src/core/components/TooltipOfDisabled.tsx
@@ -1,15 +1,13 @@
-import {Tooltip, TooltipProps} from '@sanity/ui'
-import React, {ForwardedRef, forwardRef} from 'react'
+import React, {forwardRef} from 'react'
+import {Tooltip, TooltipProps} from '../../ui'
 
 /** @internal */
-export const TooltipOfDisabled = forwardRef(function DisabledTooltip(
-  props: TooltipProps,
-  ref: ForwardedRef<HTMLDivElement>,
+export const TooltipOfDisabled = forwardRef<HTMLDivElement, TooltipProps>(function DisabledTooltip(
+  {children, content, disabled, ...restProps},
+  ref,
 ) {
-  const {children, content, disabled, ...restProps} = props
-
   return (
-    <Tooltip {...restProps} content={content} disabled={disabled || !content} padding={2} ref={ref}>
+    <Tooltip {...restProps} content={content} disabled={disabled || !content} ref={ref}>
       <div>{children}</div>
     </Tooltip>
   )
diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
index 89d5dca8f12..d2820edcd34 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
@@ -1,7 +1,8 @@
 import {EllipsisVerticalIcon} from '@sanity/icons'
-import {Box, Button, Flex, MenuButtonProps, Text, Tooltip, useElementRect} from '@sanity/ui'
+import {Button, Flex, MenuButtonProps, useElementRect} from '@sanity/ui'
 import React, {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
 import styled, {css} from 'styled-components'
+import {Tooltip} from '../../../ui'
 import {CollapseOverflowMenu} from './CollapseOverflowMenu'
 import {ObserveElement} from './ObserveElement'
 import {CollapseMenuDivider} from './CollapseMenuDivider'
@@ -198,16 +199,7 @@ export const CollapseMenu = forwardRef(function CollapseMenu(
                   aria-hidden={hidden}
                   data-hidden={hidden}
                 >
-                  <Tooltip
-                    portal
-                    disabled={!tooltipText}
-                    content={
-                      <Box padding={2} sizing="border">
-                        <Text size={1}>{tooltipText}</Text>
-                      </Box>
-                    }
-                    {...tooltipProps}
-                  >
+                  <Tooltip portal disabled={!tooltipText} content={tooltipText} {...tooltipProps}>
                     <Flex>
                       {cloneElement(child, {
                         disabled: child.props.disabled || hidden,
diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx
index 7e0a5addc61..e51ebf65905 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx
@@ -1,5 +1,6 @@
-import {Button, ButtonProps, TooltipProps} from '@sanity/ui'
+import {Button, ButtonProps} from '@sanity/ui'
 import React, {forwardRef} from 'react'
+import {TooltipProps} from '../../../ui'
 
 /** @internal */
 export interface CommonProps extends Omit<ButtonProps, 'text' | 'iconRight'> {
diff --git a/packages/sanity/src/core/components/previews/general/MediaPreview.styled.ts b/packages/sanity/src/core/components/previews/general/MediaPreview.styled.ts
index a2bc2d44c8e..ef0e4b59836 100644
--- a/packages/sanity/src/core/components/previews/general/MediaPreview.styled.ts
+++ b/packages/sanity/src/core/components/previews/general/MediaPreview.styled.ts
@@ -43,6 +43,6 @@ export const ProgressFlex = styled(Flex).attrs({align: 'center', justify: 'cente
   }
 `
 
-export const TooltipContentStack = styled(Stack).attrs({padding: 2, space: 2})`
+export const TooltipContentStack = styled(Stack).attrs({space: 2})`
   max-width: ${rem(200)};
 `
diff --git a/packages/sanity/src/core/components/previews/general/MediaPreview.tsx b/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
index 53929b31d18..44ba967e869 100644
--- a/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
+++ b/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
@@ -1,8 +1,9 @@
 import React, {useMemo} from 'react'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
-import {Text, Tooltip} from '@sanity/ui'
+import {Text} from '@sanity/ui'
 import {CircularProgress} from '../../progress'
 import {Media} from '../_common/Media'
+import {Tooltip} from '../../../../ui'
 import {PREVIEW_MEDIA_SIZE} from '../constants'
 import {PreviewMediaDimensions, PreviewProps} from '../types'
 import {renderPreviewNode} from '../helpers'
diff --git a/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx b/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
index 1ed0aefd150..4f1bde6a279 100644
--- a/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
+++ b/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
@@ -1,9 +1,10 @@
-import {Avatar, AvatarPosition, AvatarSize, AvatarStatus, Box, Text, Tooltip} from '@sanity/ui'
+import {Avatar, AvatarPosition, AvatarSize, AvatarStatus, Text} from '@sanity/ui'
 import React, {forwardRef, useState} from 'react'
 import type {User} from '@sanity/types'
 import {useUser} from '../../store'
 import {isRecord} from '../../util'
 import {useUserColor} from '../../user-color'
+import {Tooltip} from '../../../ui'
 
 /**
  * @hidden
@@ -60,15 +61,7 @@ function TooltipUserAvatar(props: Omit<UserAvatarProps, 'user'> & {user: User})
   } = props
 
   return (
-    <Tooltip
-      content={
-        <Box padding={2}>
-          <Text size={1}>{displayName}</Text>
-        </Box>
-      }
-      placement="top"
-      portal
-    >
+    <Tooltip content={displayName} placement="top" portal>
       <div style={{display: 'inline-block'}}>
         <StaticUserAvatar {...props} />
       </div>
diff --git a/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx b/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
index a97ae628fdb..998e045ce47 100644
--- a/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
+++ b/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
@@ -1,11 +1,12 @@
 import {Path} from '@sanity/types'
-import {Tooltip, TooltipProps, Text, Stack, Flex, Inline, Label} from '@sanity/ui'
+import {Text, Stack, Flex, Inline, Label} from '@sanity/ui'
 import React from 'react'
 import {LegacyLayerProvider, UserAvatar} from '../../../components'
 import {useTimeAgo} from '../../../hooks'
 import {useUser} from '../../../store'
 import {AnnotationDetails, Diff} from '../../types'
 import {getAnnotationAtPath, useAnnotationColor} from '../annotations'
+import {Tooltip, TooltipProps} from '../../../../ui'
 
 /** @internal */
 export interface DiffTooltipProps extends TooltipProps {
@@ -42,7 +43,7 @@ function DiffTooltipWithAnnotation(props: DiffTooltipWithAnnotationsProps) {
   }
 
   const content = (
-    <Stack padding={3} space={2}>
+    <Stack space={2}>
       <Label size={1} style={{textTransform: 'uppercase'}}>
         {description}
       </Label>
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
index a718514b6a0..a4390dad26a 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
@@ -3,9 +3,10 @@
 import {hues} from '@sanity/color'
 import {ErrorOutlineIcon, InfoOutlineIcon, WarningOutlineIcon} from '@sanity/icons'
 import {FormNodeValidation} from '@sanity/types'
-import {Box, Flex, Placement, Stack, Text, Tooltip} from '@sanity/ui'
+import {Box, Flex, Placement, Stack, Text} from '@sanity/ui'
 import React, {useMemo} from 'react'
 import styled from 'styled-components'
+import {Tooltip} from '../../../../ui'
 
 /** @internal */
 export interface FormFieldValidationStatusProps {
@@ -98,7 +99,7 @@ export function FormFieldValidationStatus(props: FormFieldValidationStatusProps)
   return (
     <Tooltip
       content={
-        <StyledStack padding={3} space={3}>
+        <StyledStack space={3}>
           {showSummary && <FormFieldValidationSummary validation={validation} />}
 
           {!showSummary && (
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx
index c39f1d343b5..6b597249a3b 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx
@@ -1,24 +1,23 @@
 import React, {createElement, ReactNode, useMemo} from 'react'
 import {CrossDatasetType, PreviewValue} from '@sanity/types'
-import {Box, Flex, Inline, Label, Text, Tooltip} from '@sanity/ui'
+import {Box, Flex, Inline, Label, Text} from '@sanity/ui'
 import {AccessDeniedIcon, HelpCircleIcon, LaunchIcon} from '@sanity/icons'
 import imageUrlBuilder from '@sanity/image-url'
 import {isImageSource} from '@sanity/asset-utils'
 import {DocumentAvailability} from '../../../preview'
 import {DefaultPreview, PreviewMediaDimensions, TextWithTone} from '../../../components'
+import {Tooltip} from '../../../../ui'
 import {FIXME} from '../../../FIXME'
 
 import {StyledPreviewFlex, TooltipContent} from './CrossDatasetReferencePreview.styled'
 
 function UnavailableMessage(props: {children: ReactNode}) {
   return (
-    <TooltipContent padding={3}>
+    <TooltipContent>
       <Box flex={1}>
-        <Box>
-          <Text as="p" size={1}>
-            {props.children}
-          </Text>
-        </Box>
+        <Text as="p" size={1}>
+          {props.children}
+        </Text>
       </Box>
     </TooltipContent>
   )
@@ -141,7 +140,7 @@ export function CrossDatasetReferencePreview(props: {
               <Tooltip
                 portal
                 content={
-                  <TooltipContent padding={2}>
+                  <TooltipContent>
                     {hasStudioUrl ? (
                       <Text size={1}>This document opens in a new tab</Text>
                     ) : (
diff --git a/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx b/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx
index b54872d59e9..2ab10909a4a 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx
@@ -1,9 +1,10 @@
-import {Box, Button, Text, Tooltip} from '@sanity/ui'
+import {Button} from '@sanity/ui'
 import React, {memo, useCallback} from 'react'
 import {CopyIcon} from '@sanity/icons'
 import {keyGenerator} from '@sanity/portable-text-editor'
 import {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
 import {RenderBlockActionsCallback} from '../../../../types/_transitional'
+import {Tooltip} from '../../../../../../ui'
 
 const BlockActions = memo(function BlockActions(props: {
   block: PortableTextBlock
@@ -28,15 +29,7 @@ const BlockActions = memo(function BlockActions(props: {
   }, [block, insert])
 
   return (
-    <Tooltip
-      content={
-        <Box padding={2}>
-          <Text size={1}>Duplicate</Text>
-        </Box>
-      }
-      placement="right"
-      portal="default"
-    >
+    <Tooltip content="Duplicate" placement="right" portal="default">
       <Button
         aria-label="Duplicate"
         fontSize={1}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
index 569ae9460a0..3df07877b08 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
@@ -1,6 +1,5 @@
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
 import {ObjectSchemaType, Path, PortableTextObject} from '@sanity/types'
-import {Tooltip} from '@sanity/ui'
 import React, {ComponentType, useCallback, useMemo, useState} from 'react'
 import {isEqual} from '@sanity/util/paths'
 import {pathToString} from '../../../../field'
@@ -22,6 +21,7 @@ import {usePortableTextMemberItem} from '../hooks/usePortableTextMembers'
 import {debugRender} from '../debugRender'
 import {useChildPresence} from '../../../studio/contexts/Presence'
 import {EMPTY_ARRAY} from '../../../../util'
+import {Tooltip} from '../../../../../ui'
 import {AnnotationToolbarPopover} from './AnnotationToolbarPopover'
 import {Root, TooltipBox} from './Annotation.styles'
 import {ObjectEditModal} from './modals/ObjectEditModal'
@@ -122,7 +122,7 @@ export function Annotation(props: AnnotationProps) {
           placement="bottom"
           portal="default"
           content={
-            <TooltipBox padding={2}>
+            <TooltipBox>
               <Markers
                 markers={markers}
                 renderCustomMarkers={renderCustomMarkers}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
index 15e89f01eff..61566207d8e 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
@@ -5,7 +5,7 @@ import {
   usePortableTextEditor,
 } from '@sanity/portable-text-editor'
 import {ObjectSchemaType, Path, PortableTextBlock, isImage} from '@sanity/types'
-import {Tooltip, Flex, ResponsivePaddingProps, Box} from '@sanity/ui'
+import {Flex, ResponsivePaddingProps, Box} from '@sanity/ui'
 import React, {PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {isEqual} from '@sanity/util/paths'
 import {
@@ -30,6 +30,7 @@ import {debugRender} from '../debugRender'
 import {EMPTY_ARRAY} from '../../../../util'
 import {useChildPresence} from '../../../studio/contexts/Presence'
 import {useFormCallbacks} from '../../../studio'
+import {Tooltip} from '../../../../../ui'
 import {
   Root,
   ChangeIndicatorWrapper,
@@ -187,7 +188,7 @@ export function BlockObject(props: BlockObjectProps) {
   const toolTipContent = useMemo(
     () =>
       (tooltipEnabled && (
-        <TooltipBox padding={2}>
+        <TooltipBox>
           <Markers
             markers={markers}
             validation={validation}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
index f886216daa6..ba299faa784 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
@@ -5,7 +5,6 @@ import {
 } from '@sanity/portable-text-editor'
 import {ObjectSchemaType, Path, PortableTextBlock, PortableTextChild} from '@sanity/types'
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
-import {Tooltip} from '@sanity/ui'
 import {isEqual} from '@sanity/util/paths'
 import {
   BlockProps,
@@ -24,6 +23,7 @@ import {usePortableTextMemberItem} from '../hooks/usePortableTextMembers'
 import {pathToString} from '../../../../field/paths'
 import {EMPTY_ARRAY} from '../../../../util'
 import {useChildPresence} from '../../../studio/contexts/Presence'
+import {Tooltip} from '../../../../../ui'
 import {InlineObjectToolbarPopover} from './InlineObjectToolbarPopover'
 import {ObjectEditModal} from './modals/ObjectEditModal'
 import {PreviewSpan, Root, TooltipBox} from './InlineObject.styles'
@@ -186,7 +186,7 @@ export const InlineObject = (props: InlineObjectProps) => {
   const toolTipContent = useMemo(
     () =>
       (tooltipEnabled && (
-        <TooltipBox padding={2}>
+        <TooltipBox>
           <Markers
             markers={markers}
             validation={validation}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
index e8cf732dc34..1f4e6c146d2 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
@@ -1,4 +1,4 @@
-import {Box, Flex, ResponsivePaddingProps, Tooltip, Text} from '@sanity/ui'
+import {Box, Flex, ResponsivePaddingProps, Text} from '@sanity/ui'
 import React, {RefObject, useCallback, useMemo, useState} from 'react'
 import {ObjectSchemaType, Path, PortableTextTextBlock} from '@sanity/types'
 import {
@@ -29,6 +29,7 @@ import {debugRender} from '../debugRender'
 import {EMPTY_ARRAY} from '../../../../util'
 import {useChildPresence} from '../../../studio/contexts/Presence'
 import {useFormCallbacks} from '../../../studio'
+import {Tooltip} from '../../../../../ui'
 import {TEXT_STYLE_PADDING} from './constants'
 import {
   BlockActionsInner,
@@ -249,7 +250,7 @@ export function TextBlock(props: TextBlockProps) {
   const toolTipContent = useMemo(
     () =>
       (tooltipEnabled && (
-        <TooltipBox padding={2}>
+        <TooltipBox>
           <Markers
             markers={markers}
             renderCustomMarkers={renderCustomMarkers}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
index b90640b8277..51fdf892f9b 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
@@ -6,11 +6,12 @@ import {
 } from '@sanity/portable-text-editor'
 import React, {memo, useCallback, useMemo, useState} from 'react'
 import {ObjectSchemaType, Path, SchemaType} from '@sanity/types'
-import {Box, Button, Flex, Hotkeys, Text, Tooltip, useElementRect, useToast} from '@sanity/ui'
+import {Box, Button, Flex, Hotkeys, Text, useElementRect, useToast} from '@sanity/ui'
 import {CollapseIcon, ExpandIcon} from '@sanity/icons'
 import styled, {css} from 'styled-components'
 import {useRovingFocus} from '../../../../components'
 import {useResolveInitialValueForType} from '../../../../store'
+import {Tooltip} from '../../../../../ui'
 import {ActionMenu} from './ActionMenu'
 import {BlockStyleSelect} from './BlockStyleSelect'
 import {InsertMenu} from './InsertMenu'
@@ -129,7 +130,7 @@ const InnerToolbar = memo(function InnerToolbar({
       <FullscreenButtonBox padding={isFullscreen ? 2 : 1}>
         <Tooltip
           content={
-            <Flex align="center" padding={1}>
+            <Flex align="center">
               <Box flex={1} paddingX={1}>
                 <Text size={1}>{`${isFullscreen ? 'Collapse' : 'Expand'} editor`}</Text>
               </Box>
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
index 7ce2eb3a16e..874acb61d30 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
@@ -1,7 +1,8 @@
 import React, {ComponentProps} from 'react'
 import {AddIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Tooltip} from '@sanity/ui'
+import {Button, Menu, MenuButton, MenuButtonProps, MenuItem} from '@sanity/ui'
 import {InsufficientPermissionsMessage} from '../../../components'
+import {Tooltip} from '../../../../ui'
 import {CreateReferenceOption} from './types'
 
 interface Props extends ComponentProps<typeof Button> {
@@ -30,13 +31,7 @@ export function CreateButton(props: Props) {
   const canCreateAny = createOptions.some((option) => option.permission.granted)
   if (!canCreateAny) {
     return (
-      <Tooltip
-        content={
-          <Box padding={2}>
-            <InsufficientPermissionsMessage operationLabel="create a new reference" />
-          </Box>
-        }
-      >
+      <Tooltip content={<InsufficientPermissionsMessage operationLabel="create a new reference" />}>
         {/* this wrapper div is needed because disabled button doesn't trigger mouse events */}
         <div style={INLINE_BLOCK_STYLE}>
           <Button text="Create new" mode="ghost" disabled icon={AddIcon} style={FULL_WIDTH} />
@@ -64,9 +59,7 @@ export function CreateButton(props: Props) {
               disabled={createOption.permission.granted}
               key={createOption.id}
               content={
-                <Box padding={2}>
-                  <InsufficientPermissionsMessage operationLabel="create this type of document" />
-                </Box>
+                <InsufficientPermissionsMessage operationLabel="create this type of document" />
               }
               portal
             >
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
index 09d32a0f70c..c3634943460 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
@@ -1,10 +1,11 @@
 import React, {ComponentType, ReactNode, Fragment} from 'react'
 import {Reference, ReferenceSchemaType} from '@sanity/types'
-import {Box, Flex, Inline, Label, Stack, Text, Tooltip} from '@sanity/ui'
+import {Box, Flex, Inline, Label, Stack, Text} from '@sanity/ui'
 import {AccessDeniedIcon, HelpCircleIcon} from '@sanity/icons'
 import {RenderPreviewCallback} from '../../types'
 import {SanityDefaultPreview} from '../../../preview'
 import {TextWithTone} from '../../../components'
+import {Tooltip} from '../../../../ui'
 import {ReferencePreview} from './ReferencePreview'
 import {Loadable} from './useReferenceInfo'
 import {ReferenceInfo} from './types'
@@ -142,12 +143,10 @@ export function PreviewReferenceValue(props: {
 function UnavailableMessage(props: {icon: ComponentType; children: ReactNode; title: ReactNode}) {
   const Icon = props.icon
   return (
-    <Flex padding={3}>
-      <Box>
-        <Text size={1}>
-          <Icon />
-        </Text>
-      </Box>
+    <Flex>
+      <Text size={1}>
+        <Icon />
+      </Text>
       <Box flex={1} marginLeft={3}>
         <Text size={1} weight="semibold">
           {props.title}
@@ -177,7 +176,7 @@ function InvalidType(props: {documentId: string; actualType: string; declaredTyp
         <Tooltip
           portal
           content={
-            <Stack space={3} padding={3}>
+            <Stack space={3}>
               <Text size={1}>
                 Referenced document (<code>{props.documentId}</code>) is of type{' '}
                 <code>{props.actualType}</code>.
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
index f6454cc98ac..4022f60c61c 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
@@ -1,12 +1,13 @@
 import React, {useMemo} from 'react'
 import {ObjectSchemaType} from '@sanity/types'
-import {Box, Flex, Inline, Label, Text, Tooltip, useRootTheme} from '@sanity/ui'
+import {Box, Flex, Inline, Label, Text, useRootTheme} from '@sanity/ui'
 import {EditIcon, PublishIcon} from '@sanity/icons'
 import {RenderPreviewCallback} from '../../types'
 import {PreviewLayoutKey, TextWithTone} from '../../../components'
 import {useTimeAgo} from '../../../hooks'
 import {useDocumentPresence} from '../../../store'
 import {DocumentPreviewPresence} from '../../../presence'
+import {Tooltip} from '../../../../ui'
 import {ReferenceInfo} from './types'
 
 /**
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
index 23e18210219..9292d07f32c 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
@@ -1,18 +1,9 @@
 import {ArraySchemaType, isReferenceSchemaType} from '@sanity/types'
 import {AddIcon} from '@sanity/icons'
 import React, {useId, useCallback} from 'react'
-import {
-  Box,
-  Button,
-  Grid,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Tooltip,
-  Text,
-  MenuButtonProps,
-} from '@sanity/ui'
+import {Box, Button, Grid, Menu, MenuButton, MenuItem, Text, MenuButtonProps} from '@sanity/ui'
 import {ArrayInputFunctionsProps, ObjectItem} from '../../../types'
+import {Tooltip} from '../../../../../ui'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,
@@ -45,14 +36,7 @@ export function ArrayOfObjectsFunctions<
 
   if (readOnly) {
     return (
-      <Tooltip
-        portal
-        content={
-          <Box padding={2} sizing="border">
-            <Text size={1}>This field is read-only</Text>
-          </Box>
-        }
-      >
+      <Tooltip portal content="This field is read-only">
         <Grid>
           <Button
             icon={AddIcon}
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
index 7b7d6b4857f..9e61c78d344 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
@@ -2,8 +2,9 @@
 import {ArraySchemaType, isReferenceSchemaType} from '@sanity/types'
 import {AddIcon} from '@sanity/icons'
 import React, {useMemo, useId} from 'react'
-import {Box, Button, Grid, Menu, MenuButton, MenuItem, Tooltip, Text} from '@sanity/ui'
+import {Box, Button, Grid, Menu, MenuButton, MenuItem, Text} from '@sanity/ui'
 import {ArrayInputFunctionsProps} from '../../../types'
+import {Tooltip} from '../../../../../ui'
 
 /**
  * @hidden
@@ -30,14 +31,7 @@ export function ArrayOfPrimitivesFunctions<
 
   if (readOnly) {
     return (
-      <Tooltip
-        portal
-        content={
-          <Box padding={2} sizing="border">
-            <Text size={1}>This field is read-only</Text>
-          </Box>
-        }
-      >
+      <Tooltip portal content="This field is read-only">
         <Grid>
           <Button
             icon={AddIcon}
diff --git a/packages/sanity/src/core/form/studio/assetSource/AssetRow.tsx b/packages/sanity/src/core/form/studio/assetSource/AssetRow.tsx
index 967156459e3..d3cd62356db 100644
--- a/packages/sanity/src/core/form/studio/assetSource/AssetRow.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/AssetRow.tsx
@@ -1,12 +1,13 @@
 import type {Subscription} from 'rxjs'
 import React, {useRef, useState} from 'react'
 import styled, {css} from 'styled-components'
-import {Button, Box, Card, Flex, Stack, Label, Text, Tooltip, Grid, useToast} from '@sanity/ui'
+import {Button, Box, Card, Flex, Stack, Label, Text, Grid, useToast} from '@sanity/ui'
 import {DocumentIcon, ChevronUpIcon, ChevronDownIcon, LinkIcon, TrashIcon} from '@sanity/icons'
 import {Asset as AssetType} from '@sanity/types'
 import {FIXME} from '../../../FIXME'
 import {useClient, useTimeAgo} from '../../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../studioClient'
+import {Tooltip} from '../../../../ui'
 import {prettyBytes} from './prettyBytes'
 import {AssetUsageDialog} from './AssetUsageDialog'
 import {AssetMenu} from './AssetMenu'
@@ -357,11 +358,7 @@ export const AssetRow = (props: RowProps) => {
             </Card>
             {showTooltip && (
               <Tooltip
-                content={
-                  <Box padding={2}>
-                    <Text size={1}>{originalFilename}</Text>
-                  </Box>
-                }
+                content={originalFilename}
                 fallbackPlacements={['right', 'left']}
                 placement="top"
                 portal
diff --git a/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx b/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
index 06b69b53bed..07d12106e41 100644
--- a/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
+++ b/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
@@ -1,9 +1,10 @@
-import {AvatarStack, Box, Card, Text, Tooltip, TooltipProps} from '@sanity/ui'
+import {AvatarStack, Box, Card, Text} from '@sanity/ui'
 import React, {useMemo} from 'react'
 import styled, {css, useTheme} from 'styled-components'
 import {usePreviewCard, UserAvatar} from '../components'
 import {DocumentPresence} from '../store'
 import {isNonNullable} from '../util'
+import {Tooltip, TooltipProps} from '../../ui'
 
 /** @internal */
 export interface DocumentPreviewPresenceProps {
@@ -59,7 +60,7 @@ export function DocumentPreviewPresence(props: DocumentPreviewPresenceProps) {
 
   const tooltipContent = useMemo(() => {
     return (
-      <TooltipContentBox padding={2}>
+      <TooltipContentBox>
         <Text align="center" size={1}>
           {getTooltipText(uniqueUsers)}
         </Text>
diff --git a/packages/sanity/src/core/presence/PresenceTooltip.tsx b/packages/sanity/src/core/presence/PresenceTooltip.tsx
index 7e1045bc08c..531b9d1d34f 100644
--- a/packages/sanity/src/core/presence/PresenceTooltip.tsx
+++ b/packages/sanity/src/core/presence/PresenceTooltip.tsx
@@ -1,6 +1,7 @@
 import React, {useMemo} from 'react'
-import {Flex, Stack, Text, Tooltip} from '@sanity/ui'
+import {Flex, Stack, Text} from '@sanity/ui'
 import {UserAvatar} from '../components/userAvatar'
+import {Tooltip} from '../../ui'
 import {FormNodePresence} from './types'
 
 interface PresenceTooltipProps {
@@ -19,7 +20,7 @@ export function PresenceTooltip(props: PresenceTooltipProps) {
 
   const content = useMemo(
     () => (
-      <Stack padding={1} sizing="border">
+      <Stack sizing="border">
         {items.map((item) => (
           <Flex align="center" gap={2} padding={1} key={item.user.id}>
             <div>
diff --git a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
index 07d83d92075..daa219c9106 100644
--- a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
@@ -8,8 +8,6 @@ import {
   Layer,
   LayerProvider,
   PortalProvider,
-  Text,
-  Tooltip,
   useMediaIndex,
   useRootTheme,
 } from '@sanity/ui'
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
index 9cca4e0d29c..42c90b2a69d 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
@@ -1,13 +1,11 @@
 import React, {useCallback, useMemo, useState} from 'react'
 import {
   Box,
-  Tooltip,
   Text,
   useClickOutside,
   Stack,
   TextInput,
   ButtonProps,
-  TooltipProps,
   TextInputProps,
   Label,
   Card,
@@ -19,6 +17,7 @@ import ReactFocusLock from 'react-focus-lock'
 import {InsufficientPermissionsMessage} from '../../../../components'
 import {useCurrentUser} from '../../../../store'
 import {useColorScheme} from '../../../colorScheme'
+import {Tooltip, TooltipProps} from '../../../../../ui'
 import {NewDocumentList, NewDocumentListProps} from './NewDocumentList'
 import {ModalType, NewDocumentOption} from './types'
 import {filterOptions} from './filter'
@@ -175,7 +174,7 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
   // Shared tooltip props for the popover and dialog
   const sharedTooltipProps: TooltipProps = useMemo(
     () => ({
-      content: <TooltipContentBox padding={2}>{tooltipContent}</TooltipContentBox>,
+      content: <TooltipContentBox>{tooltipContent}</TooltipContentBox>,
       disabled: loading || open,
       placement: 'bottom',
       portal: true,
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
index 30e7d95bbf8..77f5d2ea242 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
@@ -1,8 +1,9 @@
 import {CurrentUser} from '@sanity/types'
-import {Tooltip, Box, Card, Text} from '@sanity/ui'
+import {Box, Card, Text} from '@sanity/ui'
 import React, {useCallback, useMemo} from 'react'
 import styled from 'styled-components'
 import {InsufficientPermissionsMessage} from '../../../../components'
+import {Tooltip} from '../../../../../ui'
 import {NewDocumentOption, PreviewLayout} from './types'
 import {useIntentLink} from 'sanity/router'
 
@@ -48,7 +49,7 @@ export function NewDocumentListOption(props: NewDocumentListOptionProps) {
       key={option.id}
       portal
       content={
-        <TooltipContentBox padding={2}>
+        <TooltipContentBox>
           <InsufficientPermissionsMessage
             currentUser={currentUser}
             operationLabel="create this document"
diff --git a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
index c017fbc12fb..5cf49f2d5b8 100644
--- a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
@@ -1,8 +1,9 @@
 import {HelpCircleIcon} from '@sanity/icons'
-import {Box, Button, Flex, Menu, MenuButton, Text, Tooltip} from '@sanity/ui'
+import {Button, Flex, Menu, MenuButton, Text} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import styled from 'styled-components'
 import {useColorScheme} from '../../../colorScheme'
+import {Tooltip} from '../../../../../ui'
 import {useGetHelpResources} from './helper-functions/hooks'
 import {ResourcesMenuItems} from './ResourcesMenuItems'
 
@@ -23,11 +24,7 @@ export function ResourcesButton() {
   return (
     <Flex>
       <Tooltip
-        content={
-          <Box padding={2}>
-            <Text size={1}>Help and resources </Text>
-          </Box>
-        }
+        content="Help and resources"
         scheme={scheme}
         placement="bottom"
         portal
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
index 76e5ec1d2fa..df3fc758b8e 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
@@ -1,8 +1,9 @@
-import {Card, Code, Flex, Inline, Label, Stack, Text, Tooltip} from '@sanity/ui'
+import {Card, Code, Flex, Inline, Label, Stack, Text} from '@sanity/ui'
 import {startCase, uniq} from 'lodash'
 import React, {ReactElement, useMemo} from 'react'
 import {useSchema} from '../../../../../../../../hooks'
 import {isNonNullable} from '../../../../../../../../util'
+import {Tooltip} from '../../../../../../../../../ui'
 import {useSearchState} from '../../../../contexts/search/useSearchState'
 import type {SearchFieldDefinition} from '../../../../definitions/fields'
 import type {SearchFilterDefinition} from '../../../../definitions/filters'
@@ -75,7 +76,7 @@ export function FilterTooltip({
     <Tooltip
       content={
         <Card tone="default" radius={2} style={{maxWidth: '250px'}}>
-          <Stack padding={3} space={4}>
+          <Stack space={4}>
             {/* Field name */}
             {fieldDefinition && (
               <Stack space={2}>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemFilter.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemFilter.tsx
index dea885d2502..6e4a1d5c3cc 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemFilter.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemFilter.tsx
@@ -1,5 +1,5 @@
 import {Box, Button, ResponsiveMarginProps, ResponsivePaddingProps} from '@sanity/ui'
-import React, {useCallback, useEffect, useRef, useState} from 'react'
+import React, {useCallback} from 'react'
 import {useSearchState} from '../../../../contexts/search/useSearchState'
 import type {FilterMenuItemFilter} from '../../../../types'
 import {getFilterKey} from '../../../../utils/filterUtils'
@@ -16,8 +16,6 @@ export const MenuItemFilter = React.memo(function MenuItemFilter({
   onClose,
   ...rest
 }: FilterMenuItemProps) {
-  const [tooltipVisible, setTooltipVisible] = useState(false)
-
   const {
     dispatch,
     state: {filters},
@@ -30,20 +28,6 @@ export const MenuItemFilter = React.memo(function MenuItemFilter({
 
   const isAlreadyActive = !!filters.find((f) => getFilterKey(f) === getFilterKey(item.filter))
 
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>()
-
-  const handleMouseEnter = useCallback(() => {
-    timeoutRef.current = setTimeout(() => setTooltipVisible(true), 500)
-  }, [])
-  const handleMouseLeave = useCallback(() => {
-    setTooltipVisible(false)
-    clearTimeout(timeoutRef.current)
-  }, [])
-
-  useEffect(() => {
-    return () => clearTimeout(timeoutRef.current)
-  }, [])
-
   // Only enable tooltips if an associated field definition exists, or the filter has a valid description
   const tooltipEnabled = !!(item.fieldDefinition || item.filterDefinition.description)
 
@@ -55,8 +39,6 @@ export const MenuItemFilter = React.memo(function MenuItemFilter({
         justify="flex-start"
         mode="bleed"
         onClick={isAlreadyActive ? undefined : handleClick}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
         padding={0}
         style={{position: 'relative', whiteSpace: 'normal', width: '100%'}}
         tabIndex={-1}
@@ -65,7 +47,7 @@ export const MenuItemFilter = React.memo(function MenuItemFilter({
         <FilterTooltip
           fieldDefinition={item.fieldDefinition}
           filterDefinition={item.filterDefinition}
-          visible={tooltipEnabled && tooltipVisible}
+          visible={tooltipEnabled}
         >
           <Box padding={3}>
             <FilterDetails filter={item.filter} />
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
index 5b45d2e603d..2a90f8e690a 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
@@ -1,6 +1,6 @@
 import {hues} from '@sanity/color'
 import {ErrorOutlineIcon} from '@sanity/icons'
-import {Flex, Text, Theme, Tooltip} from '@sanity/ui'
+import {Flex, Text, Theme} from '@sanity/ui'
 import {format, isValid, parse} from 'date-fns'
 import React, {
   ChangeEvent,
@@ -13,6 +13,7 @@ import React, {
 } from 'react'
 import styled, {css} from 'styled-components'
 import {CustomTextInput} from '../../../../common/CustomTextInput'
+import {Tooltip} from '../../../../../../../../../../ui'
 import {getDateISOString} from './utils/getDateISOString'
 
 interface ParsedDateTextInputProps
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
index 67defcaaa24..7efef1decc1 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
@@ -1,7 +1,8 @@
-import {Box, Card, CardTone, Code, Inline, Stack, Tooltip} from '@sanity/ui'
+import {Card, CardTone, Code, Inline, Stack} from '@sanity/ui'
 import React from 'react'
 import styled from 'styled-components'
 import type {WeightedHit} from '../../../../../../../search'
+import {Tooltip} from '../../../../../../../../ui'
 
 interface DebugScoreProps {
   data: WeightedHit
@@ -30,24 +31,22 @@ export function DebugOverlay({data}: DebugScoreProps) {
     <>
       <Tooltip
         content={
-          <Box padding={2}>
-            <Stack space={2}>
-              {matchingStories.length ? (
-                <>
-                  {matchingStories.map((story) => (
-                    <Inline key={story.path} space={3}>
-                      <Code size={0} weight="semibold">
-                        {story.path}
-                      </Code>
-                      <Code size={0}>{story.why}</Code>
-                    </Inline>
-                  ))}
-                </>
-              ) : (
-                <Code size={0}>No matches</Code>
-              )}
-            </Stack>
-          </Box>
+          <Stack space={2}>
+            {matchingStories.length ? (
+              <>
+                {matchingStories.map((story) => (
+                  <Inline key={story.path} space={3}>
+                    <Code size={0} weight="semibold">
+                      {story.path}
+                    </Code>
+                    <Code size={0}>{story.why}</Code>
+                  </Inline>
+                ))}
+              </>
+            ) : (
+              <Code size={0}>No matches</Code>
+            )}
+          </Stack>
         }
         placement="bottom-start"
         portal
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
index ad170be1d69..315d97dc54c 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
@@ -12,13 +12,13 @@ import {
   MenuItem,
   Stack,
   Text,
-  Tooltip,
 } from '@sanity/ui'
 import React, {useMemo} from 'react'
 import styled from 'styled-components'
 import {UserAvatar} from '../../../../components'
 import {getProviderTitle} from '../../../../store'
 import {type StudioThemeColorSchemeKey} from '../../../../theme'
+import {Tooltip} from '../../../../../ui'
 import {
   useColorSchemeOptions,
   useColorSchemeSetValue,
@@ -106,17 +106,7 @@ export function UserMenu() {
         <StyledMenu>
           <Card padding={2}>
             <Flex align="center">
-              <Tooltip
-                disabled={!providerTitle}
-                portal
-                content={
-                  providerTitle && (
-                    <Box padding={2}>
-                      <Text size={1}>Signed in with {providerTitle}</Text>
-                    </Box>
-                  )
-                }
-              >
+              <Tooltip disabled={!providerTitle} portal content={`Signed in with ${providerTitle}`}>
                 <AvatarBox marginRight={3}>
                   <UserAvatar size={AVATAR_SIZE} user="me" />
                   {currentUser?.provider && <LoginProviderLogo provider={currentUser.provider} />}
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
index 67fc4f3d7dd..581c0f3344b 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
@@ -7,7 +7,6 @@ import {
   MenuButtonProps,
   Box,
   Label,
-  Tooltip,
   Text,
   Stack,
 } from '@sanity/ui'
@@ -16,6 +15,7 @@ import styled from 'styled-components'
 import {useActiveWorkspace} from '../../../activeWorkspaceMatcher'
 import {useColorScheme} from '../../../colorScheme'
 import {useWorkspaces} from '../../../workspaces'
+import {Tooltip} from '../../../../../ui'
 import {useWorkspaceAuthStates} from './hooks'
 import {WorkspacePreview} from './WorkspacePreview'
 import {useRouter} from 'sanity/router'
@@ -54,11 +54,7 @@ export function WorkspaceMenuButton(props: WorkspaceMenuButtonProps) {
 
   return (
     <Tooltip
-      content={
-        <Box padding={2}>
-          <Text size={1}>Select workspace</Text>
-        </Box>
-      }
+      content="Select workspace"
       disabled={tooltipDisabled}
       placement="bottom"
       portal
diff --git a/packages/sanity/src/desk/components/DraftStatus.tsx b/packages/sanity/src/desk/components/DraftStatus.tsx
index dc271e1f4d3..73dffa51faf 100644
--- a/packages/sanity/src/desk/components/DraftStatus.tsx
+++ b/packages/sanity/src/desk/components/DraftStatus.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import {EditIcon} from '@sanity/icons'
 import {PreviewValue, SanityDocument} from '@sanity/types'
-import {Box, Text, Tooltip} from '@sanity/ui'
+import {Tooltip} from '../../ui'
 import {TextWithTone, useTimeAgo} from 'sanity'
 
 export function DraftStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
@@ -12,14 +12,7 @@ export function DraftStatus(props: {document?: PreviewValue | Partial<SanityDocu
   const lastUpdatedTimeAgo = useTimeAgo(updatedAt || '', {minimal: true, agoSuffix: true})
 
   return (
-    <Tooltip
-      portal
-      content={
-        <Box padding={2}>
-          <Text size={1}>{document ? `Edited ${lastUpdatedTimeAgo}` : 'No unpublished edits'}</Text>
-        </Box>
-      }
-    >
+    <Tooltip portal content={document ? `Edited ${lastUpdatedTimeAgo}` : 'No unpublished edits'}>
       <TextWithTone tone="caution" dimmed={!document} muted={!document} size={1}>
         <EditIcon />
       </TextWithTone>
diff --git a/packages/sanity/src/desk/components/NotPublishedStatus.tsx b/packages/sanity/src/desk/components/NotPublishedStatus.tsx
index 58bffa5d6d6..9d96c0a4052 100644
--- a/packages/sanity/src/desk/components/NotPublishedStatus.tsx
+++ b/packages/sanity/src/desk/components/NotPublishedStatus.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import {UnpublishIcon} from '@sanity/icons'
-import {Text, Tooltip} from '@sanity/ui'
+import {Text} from '@sanity/ui'
+import {Tooltip} from '../../ui'
 
 export function NotPublishedStatus() {
   return (
diff --git a/packages/sanity/src/desk/components/PublishedStatus.tsx b/packages/sanity/src/desk/components/PublishedStatus.tsx
index 4b076539e06..16a830f5ef6 100644
--- a/packages/sanity/src/desk/components/PublishedStatus.tsx
+++ b/packages/sanity/src/desk/components/PublishedStatus.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import {PublishIcon} from '@sanity/icons'
 import {PreviewValue, SanityDocument} from '@sanity/types'
-import {Box, Text, Tooltip} from '@sanity/ui'
+import {Tooltip} from '../../ui'
 import {TextWithTone, useTimeAgo} from 'sanity'
 
 export function PublishedStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
@@ -13,14 +13,7 @@ export function PublishedStatus(props: {document?: PreviewValue | Partial<Sanity
   const lastUpdatedTimeAgo = useTimeAgo(updatedAt || '', {minimal: true, agoSuffix: true})
 
   return (
-    <Tooltip
-      portal
-      content={
-        <Box padding={2}>
-          <Text size={1}>{document ? `Published ${lastUpdatedTimeAgo}` : 'Not published'}</Text>
-        </Box>
-      }
-    >
+    <Tooltip portal content={document ? `Published ${lastUpdatedTimeAgo}` : 'Not published'}>
       <TextWithTone tone="positive" dimmed={!document} muted={!document} size={1}>
         <PublishIcon aria-label={statusLabel} />
       </TextWithTone>
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
index 89eeccea22e..7e96a835121 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 import styled from 'styled-components'
-import {rem, Flex, Text, Box, Tooltip, Container, Inline} from '@sanity/ui'
+import {rem, Flex, Text, Box, Inline} from '@sanity/ui'
 import {InfoOutlineIcon} from '@sanity/icons'
+import {Tooltip} from '../../../ui'
 
 export const ChevronWrapper = styled(Box)`
   margin-left: auto;
@@ -60,16 +61,7 @@ export const OtherReferenceCount = (props: {totalCount: number; references: unkn
       <Tooltip
         portal
         placement="top"
-        content={
-          <Container width={0}>
-            <Box padding={2}>
-              <Text size={1}>
-                We can't show metadata about these references because no token with access to the
-                datasets they are in was found.
-              </Text>
-            </Box>
-          </Container>
-        }
+        content="We can't show metadata about these references because no token with access to the datasets they are in was found."
       >
         <Text size={1} muted>
           <InfoOutlineIcon />
diff --git a/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx b/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
index 1a921c5cf26..c5b3b462c8c 100644
--- a/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
+++ b/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
@@ -1,5 +1,6 @@
-import {Tooltip, Text, Box} from '@sanity/ui'
+import {Text} from '@sanity/ui'
 import React from 'react'
+import {Tooltip} from '../../../ui'
 import {useCurrentUser, InsufficientPermissionsMessage} from 'sanity'
 
 interface InsufficientPermissionsMessageTooltipProps {
@@ -21,15 +22,7 @@ export function InsufficientPermissionsMessageTooltip({
 
   return (
     <Tooltip
-      content={
-        loading ? (
-          <Box padding={2}>
-            <Text>Loading…</Text>
-          </Box>
-        ) : (
-          <InsufficientPermissionsMessage currentUser={currentUser} />
-        )
-      }
+      content={loading ? 'Loading…' : <InsufficientPermissionsMessage currentUser={currentUser} />}
       portal
     >
       {/* this wrapping div is to allow mouse events */}
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
index b8a8efa4169..f08484b3c77 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
@@ -1,5 +1,5 @@
 import {ArrowLeftIcon, CloseIcon, SplitVerticalIcon} from '@sanity/icons'
-import {Button, Flex, Text, Tooltip} from '@sanity/ui'
+import {Button, Flex, Text} from '@sanity/ui'
 import React, {createElement, memo, forwardRef, useMemo} from 'react'
 import {
   PaneContextMenuButton,
@@ -12,6 +12,7 @@ import {TimelineMenu} from '../../timeline'
 import {useDocumentPane} from '../../useDocumentPane'
 import {isMenuNodeButton, isNotMenuNodeButton, resolveMenuNodes} from '../../../../menuNodes'
 import {useDeskTool} from '../../../../useDeskTool'
+import {Tooltip} from '../../../../../ui'
 import {DocumentHeaderTabs} from './DocumentHeaderTabs'
 import {DocumentHeaderTitle} from './DocumentHeaderTitle'
 import {useFieldActions, useTimelineSelector} from 'sanity'
@@ -110,16 +111,7 @@ export const DocumentPanelHeader = memo(
             <PaneContextMenuButton nodes={contextMenuNodes} key="context-menu" />
 
             {showSplitPaneButton && (
-              <Tooltip
-                content={
-                  <Text size={1} style={{whiteSpace: 'nowrap'}}>
-                    Split pane right
-                  </Text>
-                }
-                padding={2}
-                placement="bottom"
-                portal
-              >
+              <Tooltip content="Split pane right" placement="bottom" portal>
                 <Button
                   aria-label="Split pane right"
                   icon={SplitVerticalIcon}
diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
index 886c4eb4270..1fd879b4e53 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
@@ -8,7 +8,6 @@ import {
   MenuItem,
   PopoverProps,
   Text,
-  Tooltip,
 } from '@sanity/ui'
 import React, {
   createElement,
@@ -20,6 +19,7 @@ import React, {
   useId,
 } from 'react'
 import {isValidElementType} from 'react-is'
+import {Tooltip} from '../../../../ui'
 import {ActionStateDialog} from './ActionStateDialog'
 import {DocumentActionDescription, Hotkeys, LegacyLayerProvider} from 'sanity'
 
@@ -107,12 +107,6 @@ function ActionMenuListItem(props: ActionMenuListItemProps) {
     if (onHandle) onHandle()
   }, [index, onAction, onHandle])
 
-  const tooltipContent = actionState.title && (
-    <Box padding={2}>
-      <Text size={1}>{actionState.title}</Text>
-    </Box>
-  )
-
   return (
     <MenuItem
       data-testid={`action-${actionState.label.replace(' ', '')}`}
@@ -122,8 +116,8 @@ function ActionMenuListItem(props: ActionMenuListItemProps) {
       tone={actionState.tone}
     >
       <Tooltip
-        content={tooltipContent}
-        disabled={!tooltipContent}
+        content={actionState.title}
+        disabled={!actionState.title}
         fallbackPlacements={['left', 'bottom']}
         placement="top"
         portal
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
index ac9afbcbe85..e671ba7214d 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
@@ -1,11 +1,12 @@
-import {Box, Flex, Tooltip, Stack, Button, LayerProvider, Text} from '@sanity/ui'
+import {Box, Flex, Stack, Button, Hotkeys, LayerProvider, Text} from '@sanity/ui'
 import React, {memo, useMemo, useState} from 'react'
 import {RenderActionCollectionState} from '../../../components'
 import {HistoryRestoreAction} from '../../../documentActions'
+import {Tooltip} from '../../../../ui'
 import {useDocumentPane} from '../useDocumentPane'
 import {ActionMenuButton} from './ActionMenuButton'
 import {ActionStateDialog} from './ActionStateDialog'
-import {DocumentActionDescription, Hotkeys, useTimelineSelector} from 'sanity'
+import {DocumentActionDescription, useTimelineSelector} from 'sanity'
 
 interface DocumentStatusBarActionsInnerProps {
   disabled: boolean
@@ -22,7 +23,7 @@ function DocumentStatusBarActionsInner(props: DocumentStatusBarActionsInnerProps
     if (!firstActionState || (!firstActionState.title && !firstActionState.shortcut)) return null
 
     return (
-      <Flex padding={2} style={{maxWidth: 300}} align="center">
+      <Flex style={{maxWidth: 300}} align="center">
         <Text size={1}>{firstActionState.title}</Text>
         {firstActionState.shortcut && (
           <Box marginLeft={firstActionState.title ? 2 : 0}>
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx
index afa55d9262f..ffe3907b29e 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx
@@ -1,7 +1,8 @@
-import {Badge, BadgeTone, Box, Inline, Text, Tooltip} from '@sanity/ui'
+import {Badge, BadgeTone, Inline, Text} from '@sanity/ui'
 import React from 'react'
 import {RenderBadgeCollectionState} from '../../../../components'
 import {useDocumentPane} from '../../useDocumentPane'
+import {Tooltip} from '../../../../../ui'
 import {DocumentBadgeDescription} from 'sanity'
 
 interface DocumentBadgesInnerProps {
@@ -20,13 +21,7 @@ function DocumentBadgesInner({states}: DocumentBadgesInnerProps) {
     <Inline space={1}>
       {states.map((badge, index) => (
         <Tooltip
-          content={
-            badge.title && (
-              <Box padding={2}>
-                <Text size={1}>{badge.title}</Text>
-              </Box>
-            )
-          }
+          content={badge.title}
           disabled={!badge.title}
           key={String(index)}
           placement="top"
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/PublishStatus.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/PublishStatus.tsx
index 550802f7a8b..8042c9ca553 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/PublishStatus.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/PublishStatus.tsx
@@ -1,7 +1,8 @@
-import {Box, Button, Flex, Stack, Text, Tooltip} from '@sanity/ui'
+import {Box, Button, Flex, Stack, Text} from '@sanity/ui'
 import {PlayIcon, PublishIcon} from '@sanity/icons'
 import React from 'react'
 import styled from 'styled-components'
+import {Tooltip} from '../../../../../ui'
 import {useTimeAgo} from 'sanity'
 
 interface PublishStatusProps {
@@ -42,7 +43,7 @@ export function PublishStatus(props: PublishStatusProps) {
         placement="top"
         portal
         content={
-          <Stack padding={3} space={3}>
+          <Stack space={3}>
             <Text size={1}>
               {liveEdit ? (
                 <>
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/ReviewChangesButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/ReviewChangesButton.tsx
index 1f1cc80394e..6723d53896c 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/ReviewChangesButton.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/ReviewChangesButton.tsx
@@ -1,5 +1,6 @@
 import React, {useMemo} from 'react'
-import {Box, Button, ButtonProps, Flex, Stack, Text, Tooltip} from '@sanity/ui'
+import {Box, Button, ButtonProps, Flex, Stack, Text} from '@sanity/ui'
+import {Tooltip} from '../../../../../../ui'
 import {AnimatedStatusIcon} from './AnimatedStatusIcon'
 import {useTimeAgo} from 'sanity'
 
@@ -51,7 +52,7 @@ const ReviewButton = React.forwardRef(function ReviewButton(
       portal
       disabled={status !== 'changes'}
       content={
-        <Stack padding={3} space={3}>
+        <Stack space={3}>
           <Text size={1} weight="semibold">
             Review changes
           </Text>
diff --git a/packages/sanity/src/ui/tooltip/Tooltip.tsx b/packages/sanity/src/ui/tooltip/Tooltip.tsx
index 77748f99edf..9e26172c7ea 100644
--- a/packages/sanity/src/ui/tooltip/Tooltip.tsx
+++ b/packages/sanity/src/ui/tooltip/Tooltip.tsx
@@ -1,16 +1,13 @@
-import {
-  Text,
-  Tooltip as UITooltip,
-  TooltipProps as UITooltipProps,
-  HotkeysProps as UIHotkeysProps,
-} from '@sanity/ui'
-import React from 'react'
+import {Tooltip as UITooltip, TooltipProps as UITooltipProps, Text} from '@sanity/ui'
+import React, {forwardRef} from 'react'
 
 /** @internal */
-export interface TooltipProps
-  extends Pick<UITooltipProps, 'children' | 'disabled' | 'placement' | 'scheme'>,
-    Pick<UIHotkeysProps, 'keys'> {
-  text: string
+export interface TooltipProps extends UITooltipProps {
+  ref?: React.ForwardedRef<HTMLDivElement>
+}
+
+const TOOLTIP_DELAY_PROPS = {
+  open: 500,
 }
 
 /**
@@ -21,15 +18,26 @@ export interface TooltipProps
  *
  * @internal
  */
-export const Tooltip = ({text, ...rest}: TooltipProps) => {
+export const Tooltip = forwardRef(function Tooltip(
+  props: TooltipProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {content, ...rest} = props
+
   return (
     <UITooltip
       content={
-        <Text size={1} weight="medium">
-          {text}
-        </Text>
+        typeof content === 'string' || typeof content === 'number' ? (
+          <Text size={1} weight="medium">
+            {content}
+          </Text>
+        ) : (
+          content
+        )
       }
+      delay={TOOLTIP_DELAY_PROPS}
+      ref={ref}
       {...rest}
     />
   )
-}
+})