tldraw 4.3.0-canary.b8f81b08d169 → 4.3.0-canary.b9cf1eed518f

package/src/lib/shapes/shared/HyperlinkButton.tsx

@@ -1,13 +1,14 @@
-import { useEditor, useValue } from '@tldraw/editor'
+import { useEditor } from '@tldraw/editor'
 import classNames from 'classnames'
 import { PointerEventHandler, useCallback } from 'react'
+import { useEfficientZoomThreshold } from './useEfficientZoomThreshold'
 
 const LINK_ICON =
 	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 5H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6M19 5h6m0 0v6m0-6L13 17'/%3E%3C/svg%3E"
 
 export function HyperlinkButton({ url }: { url: string }) {
 	const editor = useEditor()
-	const hideButton = useValue('zoomLevel', () => editor.getZoomLevel() < 0.32, [editor])
+	const hideButton = useEfficientZoomThreshold()
 	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
 			if (!editor.inputs.shiftKey) editor.markEventAsHandled(e)

package/src/lib/shapes/shared/PlainTextLabel.tsx

@@ -7,6 +7,7 @@ import {
 	TLDefaultVerticalAlignStyle,
 	TLShapeId,
 } from '@tldraw/editor'
+import classNames from 'classnames'
 import React from 'react'
 import { PlainTextArea } from '../text/PlainTextArea'
 import { TextHelpers } from './TextHelpers'
@@ -34,6 +35,7 @@ export interface PlainTextLabelProps {
 	textWidth?: number
 	textHeight?: number
 	padding?: number
+	showTextOutline?: boolean
 }
 
 /**
@@ -61,6 +63,7 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
 	style,
 	textWidth,
 	textHeight,
+	showTextOutline = true,
 }: PlainTextLabelProps) {
 	const { rInput, isEmpty, isEditing, isReadyForEditing, ...editableTextRest } =
 		useEditablePlainText(shapeId, type, plaintext)
@@ -109,7 +112,13 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
 					height: textHeight ? Math.ceil(textHeight) : undefined,
 				}}
 			>
-				<div className={`${cssPrefix} tl-text tl-text-content`} dir="auto">
+				<div
+					className={classNames(
+						`${cssPrefix} tl-text tl-text-content`,
+						showTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'
+					)}
+					dir="auto"
+				>
 					{finalPlainText.split('\n').map((lineOfText, index) => (
 						<div key={index} dir="auto">
 							{lineOfText}

package/src/lib/shapes/shared/RichTextLabel.tsx

@@ -15,6 +15,7 @@ import {
 	useReactor,
 	useValue,
 } from '@tldraw/editor'
+import classNames from 'classnames'
 import React, { useMemo } from 'react'
 import { renderHtmlFromRichText } from '../../utils/text/richText'
 import { RichTextArea } from '../text/RichTextArea'
@@ -44,6 +45,7 @@ export interface RichTextLabelProps {
 	textHeight?: number
 	padding?: number
 	hasCustomTabBehavior?: boolean
+	showTextOutline?: boolean
 }
 
 /**
@@ -72,6 +74,7 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 	textWidth,
 	textHeight,
 	hasCustomTabBehavior,
+	showTextOutline = true,
 }: RichTextLabelProps) {
 	const editor = useEditor()
 	const isDragging = React.useRef(false)
@@ -129,7 +132,10 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 	const cssPrefix = classNamePrefix || 'tl-text'
 	return (
 		<div
-			className={`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`}
+			className={classNames(
+				`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`,
+				showTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'
+			)}
 			aria-hidden={!isEditing}
 			data-font={font}
 			data-align={align}
@@ -259,7 +265,10 @@ export function RichTextSVG({
 			y={bounds.minY}
 			width={bounds.w}
 			height={bounds.h}
-			className="tl-export-embed-styles tl-rich-text tl-rich-text-svg"
+			className={classNames(
+				'tl-export-embed-styles tl-rich-text tl-rich-text-svg',
+				showTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'
+			)}
 		>
 			<div style={wrapperStyle}>
 				<div dangerouslySetInnerHTML={{ __html: html }} style={style} />

package/src/lib/shapes/shared/ShapeFill.tsx

@@ -50,10 +50,10 @@ export const ShapeFill = React.memo(function ShapeFill({
 export function PatternFill({ d, color, theme }: ShapeFillProps) {
 	const editor = useEditor()
 	const svgExport = useSvgExportContext()
-	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
 	const getHashPatternZoomName = useGetHashPatternZoomName()
 
-	const teenyTiny = editor.getZoomLevel() <= 0.18
+	const teenyTiny = zoomLevel <= 0.18
 
 	return (
 		<>

package/src/lib/shapes/shared/useEfficientZoomThreshold.ts

@@ -0,0 +1,10 @@
+import { useEditor, useValue } from '@tldraw/editor'
+
+/** Returns true when zoomed out far enough that shapes should render in a simplified "solid" style. */
+export function useEfficientZoomThreshold(threshold = 0.25) {
+	const editor = useEditor()
+	return useValue('efficient zoom threshold', () => editor.getEfficientZoomLevel() < threshold, [
+		editor,
+		threshold,
+	])
+}

package/src/lib/shapes/shared/useImageOrVideoAsset.ts

@@ -96,7 +96,7 @@ export function useImageOrVideoAsset({ shapeId, assetId, width }: UseImageOrVide
 
 			const screenScale = exportInfo
 				? exportInfo.scale * (width / asset.props.w)
-				: editor.getZoomLevel() * (width / asset.props.w)
+				: editor.getEfficientZoomLevel() * (width / asset.props.w)
 
 			function resolve(asset: TLImageAsset | TLVideoAsset, url: string | null) {
 				if (isCancelled) return // don't update if the hook has remounted

package/src/lib/shapes/text/TextShapeUtil.tsx

@@ -43,6 +43,8 @@ const sizeCache = createComputedCache(
 export interface TextShapeOptions {
 	/** How much addition padding should be added to the horizontal geometry of the shape when binding to an arrow? */
 	extraArrowHorizontalPadding: number
+	/** Whether to show the outline of the text shape (using the same color as the canvas). This helps with overlapping shapes. It does not show up on Safari, where text outline is a performance issues. */
+	showTextOutline: boolean
 }
 
 /** @public */
@@ -53,6 +55,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 
 	override options: TextShapeOptions = {
 		extraArrowHorizontalPadding: 10,
+		showTextOutline: true,
 	}
 
 	getDefaultProps(): TLTextShape['props'] {
@@ -140,6 +143,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 				isSelected={isSelected}
 				textWidth={width}
 				textHeight={height}
+				showTextOutline={this.options.showTextOutline}
 				style={{
 					transform: `scale(${scale})`,
 					transformOrigin: 'top left',
@@ -175,6 +179,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 				labelColor={getColorValue(theme, shape.props.color, 'solid')}
 				bounds={exportBounds}
 				padding={0}
+				showTextOutline={this.options.showTextOutline}
 			/>
 		)
 	}

package/src/lib/shapes/video/VideoShapeUtil.tsx

@@ -95,7 +95,8 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
 
 const VideoShape = memo(function VideoShape({ shape }: { shape: TLVideoShape }) {
 	const editor = useEditor()
-	const showControls = editor.getShapeGeometry(shape).bounds.w * editor.getZoomLevel() >= 110
+	const showControls =
+		editor.getShapeGeometry(shape).bounds.w * editor.getEfficientZoomLevel() >= 110
 	const isEditing = useIsEditing(shape.id)
 	const prefersReducedMotion = usePrefersReducedMotion()
 	const { Spinner } = useEditorComponents()

package/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx

@@ -1,4 +1,3 @@
-import { useEditor, useValue } from '@tldraw/editor'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import {
@@ -9,6 +8,7 @@ import {
 	useThreeStackableItems,
 	useUnlockedSelectedShapesCount,
 } from '../../hooks/menu-hooks'
+import { ZoomTo100MenuItem } from '../menu-items'
 import { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'
 
 /** @public @react */
@@ -99,14 +99,6 @@ export function ZoomOrRotateMenuItem() {
 }
 /** @public @react */
 
-export function ZoomTo100MenuItem() {
-	const editor = useEditor()
-	const isZoomedTo100 = useValue('zoom is 1', () => editor.getZoomLevel() === 1, [editor])
-
-	return <TldrawUiMenuActionItem actionId="zoom-to-100" disabled={isZoomedTo100} />
-}
-/** @public @react */
-
 export function RotateCCWMenuItem() {
 	const oneSelected = useUnlockedSelectedShapesCount(1)
 	const isInSelectState = useIsInSelectState()

package/src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx

@@ -48,7 +48,7 @@ export const DefaultZoomMenu = memo(function DefaultZoomMenu({ children }: TLUiZ
 const ZoomTriggerButton = () => {
 	const editor = useEditor()
 	const breakpoint = useBreakpoint()
-	const zoom = useValue('zoom', () => editor.getZoomLevel(), [editor])
+	const zoom = useValue('zoom', () => editor.getEfficientZoomLevel(), [editor])
 	const msg = useTranslation()
 
 	const handleDoubleClick = useCallback(() => {

package/src/lib/ui/components/menu-items.tsx

@@ -182,7 +182,9 @@ export function UnlockAllMenuItem() {
 /** @public @react */
 export function ZoomTo100MenuItem() {
 	const editor = useEditor()
-	const isZoomedTo100 = useValue('zoomed to 100', () => editor.getZoomLevel() === 1, [editor])
+	const isZoomedTo100 = useValue('zoomed to 100', () => editor.getEfficientZoomLevel() === 1, [
+		editor,
+	])
 
 	return <TldrawUiMenuActionItem actionId="zoom-to-100" noClose disabled={isZoomedTo100} />
 }

package/src/lib/ui/components/primitives/TldrawUiSlider.tsx

@@ -3,7 +3,7 @@ import { Slider as _Slider } from 'radix-ui'
 import React, { useCallback, useEffect, useState } from 'react'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiTooltip, tooltipManager } from './TldrawUiTooltip'
+import { hideAllTooltips, TldrawUiTooltip } from './TldrawUiTooltip'
 
 /** @public */
 export interface TLUiSliderProps {
@@ -52,7 +52,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 	)
 
 	const handlePointerDown = useCallback(() => {
-		tooltipManager.hideAllTooltips()
+		hideAllTooltips()
 		onHistoryMark?.('click slider')
 	}, [onHistoryMark])
 

package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx

@@ -1,4 +1,12 @@
-import { assert, Atom, atom, Editor, uniqueId, useMaybeEditor, useValue } from '@tldraw/editor'
+import {
+	assert,
+	atom,
+	Editor,
+	tlenvReactive,
+	uniqueId,
+	useMaybeEditor,
+	useValue,
+} from '@tldraw/editor'
 import { Tooltip as _Tooltip } from 'radix-ui'
 import React, {
 	createContext,
@@ -6,7 +14,6 @@ import React, {
 	ReactNode,
 	useContext,
 	useEffect,
-	useLayoutEffect,
 	useRef,
 	useState,
 } from 'react'
@@ -25,7 +32,7 @@ export interface TldrawUiTooltipProps {
 	delayDuration?: number
 }
 
-interface CurrentTooltip {
+interface TooltipData {
 	id: string
 	content: ReactNode
 	side: 'top' | 'right' | 'bottom' | 'left'
@@ -35,11 +42,25 @@ interface CurrentTooltip {
 	delayDuration: number
 }
 
-// Singleton tooltip manager
+// State machine states
+type TooltipState =
+	| { name: 'idle' }
+	| { name: 'pointer_down' }
+	| { name: 'showing'; tooltip: TooltipData }
+	| { name: 'waiting_to_hide'; tooltip: TooltipData; timeoutId: number }
+
+// State machine events
+type TooltipEvent =
+	| { type: 'pointer_down' }
+	| { type: 'pointer_up' }
+	| { type: 'show'; tooltip: TooltipData }
+	| { type: 'hide'; tooltipId: string; editor: Editor | null; instant: boolean }
+	| { type: 'hide_all' }
+
+// Singleton tooltip manager using explicit state machine
 class TooltipManager {
 	private static instance: TooltipManager | null = null
-	private currentTooltip = atom<CurrentTooltip | null>('current tooltip', null)
-	private destroyTimeoutId: number | null = null
+	private state = atom<TooltipState>('tooltip state', { name: 'idle' })
 
 	static getInstance(): TooltipManager {
 		if (!TooltipManager.instance) {
@@ -48,86 +69,117 @@ class TooltipManager {
 		return TooltipManager.instance
 	}
 
-	showTooltip(
-		tooltipId: string,
-		content: string | React.ReactNode,
-		targetElement: HTMLElement,
-		side: 'top' | 'right' | 'bottom' | 'left',
-		sideOffset: number,
-		showOnMobile: boolean,
-		delayDuration: number
-	) {
-		// Clear any existing destroy timeout
-		if (this.destroyTimeoutId) {
-			clearTimeout(this.destroyTimeoutId)
-			this.destroyTimeoutId = null
-		}
-
-		// Update current tooltip
-		this.currentTooltip.set({
-			id: tooltipId,
-			content,
-			side,
-			sideOffset,
-			showOnMobile,
-			targetElement,
-			delayDuration,
-		})
+	hideAllTooltips() {
+		this.handleEvent({ type: 'hide_all' })
 	}
 
-	updateCurrentTooltip(tooltipId: string, update: (tooltip: CurrentTooltip) => CurrentTooltip) {
-		this.currentTooltip.update((tooltip) => {
-			if (tooltip?.id === tooltipId) {
-				return update(tooltip)
+	handleEvent(event: TooltipEvent) {
+		const currentState = this.state.get()
+
+		switch (event.type) {
+			case 'pointer_down': {
+				// Transition to pointer_down from any state
+				if (currentState.name === 'waiting_to_hide') {
+					clearTimeout(currentState.timeoutId)
+				}
+				this.state.set({ name: 'pointer_down' })
+				break
 			}
-			return tooltip
-		})
-	}
 
-	hideTooltip(editor: Editor | null, tooltipId: string, instant: boolean = false) {
-		const hide = () => {
-			// Only hide if this is the current tooltip
-			if (this.currentTooltip.get()?.id === tooltipId) {
-				this.currentTooltip.set(null)
-				this.destroyTimeoutId = null
+			case 'pointer_up': {
+				// Only transition from pointer_down to idle
+				if (currentState.name === 'pointer_down') {
+					this.state.set({ name: 'idle' })
+				}
+				break
 			}
-		}
 
-		if (editor && !instant) {
-			// Start destroy timeout (1 second)
-			this.destroyTimeoutId = editor.timers.setTimeout(hide, 300)
-		} else {
-			hide()
-		}
-	}
+			case 'show': {
+				// Don't show tooltips while pointer is down
+				if (currentState.name === 'pointer_down') {
+					return
+				}
 
-	hideAllTooltips() {
-		this.currentTooltip.set(null)
-		this.destroyTimeoutId = null
-	}
+				// Clear any existing timeout if transitioning from waiting_to_hide
+				if (currentState.name === 'waiting_to_hide') {
+					clearTimeout(currentState.timeoutId)
+				}
+
+				// Transition to showing state
+				this.state.set({ name: 'showing', tooltip: event.tooltip })
+				break
+			}
+
+			case 'hide': {
+				const { tooltipId, editor, instant } = event
+
+				// Only hide if the tooltip matches
+				if (currentState.name === 'showing' && currentState.tooltip.id === tooltipId) {
+					if (editor && !instant) {
+						// Transition to waiting_to_hide state
+						const timeoutId = editor.timers.setTimeout(() => {
+							const state = this.state.get()
+							if (state.name === 'waiting_to_hide' && state.tooltip.id === tooltipId) {
+								this.state.set({ name: 'idle' })
+							}
+						}, 300)
+						this.state.set({
+							name: 'waiting_to_hide',
+							tooltip: currentState.tooltip,
+							timeoutId,
+						})
+					} else {
+						this.state.set({ name: 'idle' })
+					}
+				} else if (
+					currentState.name === 'waiting_to_hide' &&
+					currentState.tooltip.id === tooltipId
+				) {
+					// Already waiting to hide, make it instant if requested
+					if (instant) {
+						clearTimeout(currentState.timeoutId)
+						this.state.set({ name: 'idle' })
+					}
+				}
+				break
+			}
 
-	getCurrentTooltipData() {
-		const currentTooltip = this.currentTooltip.get()
-		if (!currentTooltip) return null
-		if (!this.supportsHover() && !currentTooltip.showOnMobile) return null
-		return currentTooltip
+			case 'hide_all': {
+				if (currentState.name === 'waiting_to_hide') {
+					clearTimeout(currentState.timeoutId)
+				}
+				// Preserve pointer_down state if that's the current state
+				if (currentState.name === 'pointer_down') {
+					return
+				}
+				this.state.set({ name: 'idle' })
+				break
+			}
+		}
 	}
 
-	private supportsHoverAtom: Atom<boolean> | null = null
-	supportsHover() {
-		if (!this.supportsHoverAtom) {
-			const mediaQuery = window.matchMedia('(hover: hover)')
-			const supportsHover = atom('has hover', mediaQuery.matches)
-			this.supportsHoverAtom = supportsHover
-			mediaQuery.addEventListener('change', (e) => {
-				supportsHover.set(e.matches)
-			})
+	getCurrentTooltipData(): TooltipData | null {
+		const currentState = this.state.get()
+		let tooltip: TooltipData | null = null
+
+		if (currentState.name === 'showing') {
+			tooltip = currentState.tooltip
+		} else if (currentState.name === 'waiting_to_hide') {
+			tooltip = currentState.tooltip
 		}
-		return this.supportsHoverAtom.get()
+
+		if (!tooltip) return null
+		if (tlenvReactive.get().isCoarsePointer && !tooltip.showOnMobile) return null
+		return tooltip
 	}
 }
 
-export const tooltipManager = TooltipManager.getInstance()
+const tooltipManager = TooltipManager.getInstance()
+
+/** @public */
+export function hideAllTooltips() {
+	tooltipManager.hideAllTooltips()
+}
 
 // Context for the tooltip singleton
 const TooltipSingletonContext = createContext<boolean>(false)
@@ -167,14 +219,19 @@ function TooltipSingleton() {
 	// Hide tooltip when camera is moving (panning/zooming)
 	useEffect(() => {
 		if (cameraState === 'moving' && isOpen && currentTooltip) {
-			tooltipManager.hideTooltip(editor, currentTooltip.id, true)
+			tooltipManager.handleEvent({
+				type: 'hide',
+				tooltipId: currentTooltip.id,
+				editor,
+				instant: true,
+			})
 		}
 	}, [cameraState, isOpen, currentTooltip, editor])
 
 	useEffect(() => {
 		function handleKeyDown(event: KeyboardEvent) {
 			if (event.key === 'Escape' && currentTooltip && isOpen) {
-				tooltipManager.hideTooltip(editor, currentTooltip.id)
+				hideAllTooltips()
 				event.stopPropagation()
 			}
 		}
@@ -183,7 +240,29 @@ function TooltipSingleton() {
 		return () => {
 			document.removeEventListener('keydown', handleKeyDown, { capture: true })
 		}
-	}, [editor, currentTooltip, isOpen])
+	}, [currentTooltip, isOpen])
+
+	// Hide tooltip and prevent new ones from opening while pointer is down
+	useEffect(() => {
+		function handlePointerDown() {
+			tooltipManager.handleEvent({ type: 'pointer_down' })
+		}
+
+		function handlePointerUp() {
+			tooltipManager.handleEvent({ type: 'pointer_up' })
+		}
+
+		document.addEventListener('pointerdown', handlePointerDown, { capture: true })
+		document.addEventListener('pointerup', handlePointerUp, { capture: true })
+		document.addEventListener('pointercancel', handlePointerUp, { capture: true })
+		return () => {
+			document.removeEventListener('pointerdown', handlePointerDown, { capture: true })
+			document.removeEventListener('pointerup', handlePointerUp, { capture: true })
+			document.removeEventListener('pointercancel', handlePointerUp, { capture: true })
+			// Reset pointer state on unmount to prevent stuck state
+			tooltipManager.handleEvent({ type: 'pointer_up' })
+		}
+	}, [])
 
 	// Update open state and trigger position
 	useEffect(() => {
@@ -280,23 +359,16 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 			const currentTooltipId = tooltipId.current
 			return () => {
 				if (hasProvider) {
-					tooltipManager.hideTooltip(editor, currentTooltipId, true)
+					tooltipManager.handleEvent({
+						type: 'hide',
+						tooltipId: currentTooltipId,
+						editor,
+						instant: true,
+					})
 				}
 			}
 		}, [editor, hasProvider])
 
-		useLayoutEffect(() => {
-			if (hasProvider && tooltipManager.getCurrentTooltipData()?.id === tooltipId.current) {
-				tooltipManager.updateCurrentTooltip(tooltipId.current, (tooltip) => ({
-					...tooltip,
-					content,
-					side: sideToUse,
-					sideOffset,
-					showOnMobile,
-				}))
-			}
-		}, [content, sideToUse, sideOffset, showOnMobile, hasProvider])
-
 		// Don't show tooltip if disabled, no content, or enhanced accessibility mode is disabled
 		if (disabled || !content) {
 			return <>{children}</>
@@ -340,38 +412,54 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 
 		const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
 			child.props.onMouseEnter?.(event)
-			tooltipManager.showTooltip(
-				tooltipId.current,
-				content,
-				event.currentTarget as HTMLElement,
-				sideToUse,
-				sideOffset,
-				showOnMobile,
-				delayDurationToUse
-			)
+			tooltipManager.handleEvent({
+				type: 'show',
+				tooltip: {
+					id: tooltipId.current,
+					content,
+					targetElement: event.currentTarget as HTMLElement,
+					side: sideToUse,
+					sideOffset,
+					showOnMobile,
+					delayDuration: delayDurationToUse,
+				},
+			})
 		}
 
 		const handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
 			child.props.onMouseLeave?.(event)
-			tooltipManager.hideTooltip(editor, tooltipId.current)
+			tooltipManager.handleEvent({
+				type: 'hide',
+				tooltipId: tooltipId.current,
+				editor,
+				instant: false,
+			})
 		}
 
 		const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
 			child.props.onFocus?.(event)
-			tooltipManager.showTooltip(
-				tooltipId.current,
-				content,
-				event.currentTarget as HTMLElement,
-				sideToUse,
-				sideOffset,
-				showOnMobile,
-				delayDurationToUse
-			)
+			tooltipManager.handleEvent({
+				type: 'show',
+				tooltip: {
+					id: tooltipId.current,
+					content,
+					targetElement: event.currentTarget as HTMLElement,
+					side: sideToUse,
+					sideOffset,
+					showOnMobile,
+					delayDuration: delayDurationToUse,
+				},
+			})
 		}
 
 		const handleBlur = (event: React.FocusEvent<HTMLElement>) => {
 			child.props.onBlur?.(event)
-			tooltipManager.hideTooltip(editor, tooltipId.current)
+			tooltipManager.handleEvent({
+				type: 'hide',
+				tooltipId: tooltipId.current,
+				editor,
+				instant: false,
+			})
 		}
 
 		const childrenWithHandlers = React.cloneElement(children as React.ReactElement, {

package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

@@ -24,7 +24,7 @@ import { TldrawUiDropdownMenuItem } from '../TldrawUiDropdownMenu'
 import { TLUiIconJsx } from '../TldrawUiIcon'
 import { TldrawUiKbd } from '../TldrawUiKbd'
 import { TldrawUiToolbarButton } from '../TldrawUiToolbar'
-import { tooltipManager } from '../TldrawUiTooltip'
+import { hideAllTooltips } from '../TldrawUiTooltip'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
 /** @public */
@@ -350,7 +350,7 @@ function useDraggableEvents(
 							point: screenSpaceStart,
 						})
 
-						tooltipManager.hideAllTooltips()
+						hideAllTooltips()
 						editor.getContainer().focus()
 					})
 				}