tldraw 3.16.0-canary.ed8bd30c0f28 → 3.16.0-canary.efdec30fc411

package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx

@@ -20,6 +20,7 @@ import {
 	TldrawUiPopoverTrigger,
 } from '../primitives/TldrawUiPopover'
 import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
+import { TldrawUiRow } from '../primitives/layout'
 import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 
 export const IsInOverflowContext = createContext(false)
@@ -61,15 +62,12 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 		const activeCss = lastActiveOverflowItem ? `:not([data-value="${lastActiveOverflowItem}"])` : ''
 
 		return `
-			#${id}_main > *:nth-child(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)})${activeCss} {
+			#${id}_main > *:nth-of-type(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)}):not([data-radix-popper-content-wrapper])${activeCss} {
 				display: none;
 			}
-			#${id}_more > *:nth-child(-n + ${overflowIndex}) {
+			#${id}_more > *:nth-of-type(-n + ${overflowIndex}):not([data-radix-popper-content-wrapper]) {
 				display: none;
 			}
-			#${id}_more > *:nth-child(-n + ${overflowIndex + 4}) {
-				margin-top: 0;
-			}
         `
 	}, [lastActiveOverflowItem, id, overflowIndex])
 
@@ -158,16 +156,17 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 		<>
 			<style nonce={editor.options.nonce}>{css}</style>
 			<TldrawUiToolbar
-				className={classNames('tlui-toolbar__tools', {
-					'tlui-toolbar__tools__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
+				orientation="horizontal"
+				className={classNames('tlui-main-toolbar__tools', {
+					'tlui-main-toolbar__tools__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
 				})}
 				label={msg('tool-panel.title')}
 			>
-				<div id={`${id}_main`} ref={mainToolsRef} className="tlui-toolbar__tools__list">
+				<TldrawUiRow id={`${id}_main`} ref={mainToolsRef}>
 					<TldrawUiMenuContextProvider type="toolbar" sourceId="toolbar">
 						{children}
 					</TldrawUiMenuContextProvider>
-				</div>
+				</TldrawUiRow>
 				{/* There is a +1 because if the menu is just one item, it's not necessary. */}
 				{totalItems > overflowIndex + 1 && (
 					<IsInOverflowContext.Provider value={true}>
@@ -176,7 +175,7 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 								<TldrawUiToolbarButton
 									title={msg('tool-panel.more')}
 									type="tool"
-									className="tlui-toolbar__overflow"
+									className="tlui-main-toolbar__overflow"
 									data-testid="tools.more-button"
 								>
 									<TldrawUiButtonIcon icon="chevron-up" />
@@ -184,7 +183,7 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 							</TldrawUiPopoverTrigger>
 							<TldrawUiPopoverContent side="top" align="center">
 								<TldrawUiToolbar
-									className="tlui-buttons__grid"
+									orientation="grid"
 									data-testid="tools.more-content"
 									label={msg('tool-panel.more')}
 									id={`${id}_more`}

package/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx

@@ -5,6 +5,7 @@ import { useBreakpoint } from '../../context/breakpoints'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
+import { TldrawUiTooltip } from '../primitives/TldrawUiTooltip'
 
 /** @public */
 export interface ToggleToolLockedButtonProps {
@@ -25,16 +26,18 @@ export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonP
 	if (!activeToolId || !tool.isLockable) return null
 
 	return (
-		<TldrawUiButton
-			type="normal"
-			title={msg('action.toggle-tool-lock')}
-			data-testid="tool-lock"
-			className={classNames('tlui-toolbar__lock-button', {
-				'tlui-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
-			})}
-			onClick={() => editor.updateInstanceState({ isToolLocked: !isToolLocked })}
-		>
-			<TldrawUiButtonIcon icon={isToolLocked ? 'lock' : 'unlock'} small />
-		</TldrawUiButton>
+		<TldrawUiTooltip content={msg('action.toggle-tool-lock')}>
+			<TldrawUiButton
+				type="normal"
+				title={msg('action.toggle-tool-lock')}
+				data-testid="tool-lock"
+				className={classNames('tlui-main-toolbar__lock-button', {
+					'tlui-main-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
+				})}
+				onClick={() => editor.updateInstanceState({ isToolLocked: !isToolLocked })}
+			>
+				<TldrawUiButtonIcon icon={isToolLocked ? 'lock' : 'unlock'} small />
+			</TldrawUiButton>
+		</TldrawUiTooltip>
 	)
 }

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

@@ -651,6 +651,14 @@ export function ToggleKeyboardShortcutsItem() {
 	)
 }
 
+/** @public @react */
+export function ToggleUiLabelsItem() {
+	const editor = useEditor()
+	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
+
+	return <TldrawUiMenuActionCheckboxItem actionId="toggle-ui-labels" checked={showUiLabels} />
+}
+
 /** @public @react */
 export function ToggleDebugModeItem() {
 	const editor = useEditor()

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

@@ -6,7 +6,6 @@ import {
 	TLDefaultColorTheme,
 	useEditor,
 } from '@tldraw/editor'
-import classNames from 'classnames'
 import { ReactElement, memo, useMemo, useRef } from 'react'
 import { StyleValuesForUi } from '../../../styles'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
@@ -15,6 +14,7 @@ import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKe
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'
 import { TldrawUiToolbarToggleGroup, TldrawUiToolbarToggleItem } from './TldrawUiToolbar'
+import { TldrawUiGrid, TldrawUiRow } from './layout'
 
 /** @public */
 export interface TLUiButtonPickerProps<T extends string> {
@@ -116,41 +116,43 @@ export const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker<T extends
 		}
 	}, [editor, breakpoint, value, onHistoryMark, onValueChange, style])
 
+	const Wrapper = items.length > 4 ? TldrawUiGrid : TldrawUiRow
+
 	return (
-		<TldrawUiToolbarToggleGroup
-			data-testid={`style.${uiType}`}
-			type="single"
-			className={classNames('tlui-buttons__grid')}
-			value={value.type === 'shared' ? value.value : undefined}
-		>
-			{items.map((item) => {
-				const label = title + ' — ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
-				return (
-					<TldrawUiToolbarToggleItem
-						type="icon"
-						key={item.value}
-						data-id={item.value}
-						data-testid={`style.${uiType}.${item.value}`}
-						aria-label={label}
-						value={item.value}
-						data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
-						data-isactive={value.type === 'shared' && value.value === item.value}
-						title={label}
-						className={classNames('tlui-button-grid__button')}
-						style={
-							style === (DefaultColorStyle as StyleProp<unknown>)
-								? { color: theme[item.value as TLDefaultColorStyle].solid }
-								: undefined
-						}
-						onPointerEnter={handleButtonPointerEnter}
-						onPointerDown={handleButtonPointerDown}
-						onPointerUp={handleButtonPointerUp}
-						onClick={handleButtonClick}
-					>
-						<TldrawUiButtonIcon icon={item.icon} />
-					</TldrawUiToolbarToggleItem>
-				)
-			})}
-		</TldrawUiToolbarToggleGroup>
+		<Wrapper asChild>
+			<TldrawUiToolbarToggleGroup
+				data-testid={`style.${uiType}`}
+				type="single"
+				value={value.type === 'shared' ? value.value : undefined}
+			>
+				{items.map((item) => {
+					const label = title + ' — ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
+					return (
+						<TldrawUiToolbarToggleItem
+							type="icon"
+							key={item.value}
+							data-id={item.value}
+							data-testid={`style.${uiType}.${item.value}`}
+							aria-label={label}
+							value={item.value}
+							data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
+							data-isactive={value.type === 'shared' && value.value === item.value}
+							title={label}
+							style={
+								style === (DefaultColorStyle as StyleProp<unknown>)
+									? { color: theme[item.value as TLDefaultColorStyle].solid }
+									: undefined
+							}
+							onPointerEnter={handleButtonPointerEnter}
+							onPointerDown={handleButtonPointerDown}
+							onPointerUp={handleButtonPointerUp}
+							onClick={handleButtonClick}
+						>
+							<TldrawUiButtonIcon icon={item.icon} />
+						</TldrawUiToolbarToggleItem>
+					)
+				})}
+			</TldrawUiToolbarToggleGroup>
+		</Wrapper>
 	)
 }) as <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement

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

@@ -172,7 +172,7 @@ export const TldrawUiContextualToolbar = ({
 			className={classNames('tlui-contextual-toolbar', className)}
 			onPointerDown={stopEventPropagation}
 		>
-			<TldrawUiToolbar className="tlui-menu tlui-buttons__horizontal" label={label}>
+			<TldrawUiToolbar orientation="horizontal" className="tlui-menu" label={label}>
 				{children}
 			</TldrawUiToolbar>
 		</div>

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

@@ -1,4 +1,5 @@
 import { useContainer } from '@tldraw/editor'
+import classNames from 'classnames'
 import { Popover as _Popover } from 'radix-ui'
 import React from 'react'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
@@ -9,15 +10,16 @@ export interface TLUiPopoverProps {
 	open?: boolean
 	children: React.ReactNode
 	onOpenChange?(isOpen: boolean): void
+	className?: string
 }
 
 /** @public @react */
-export function TldrawUiPopover({ id, children, onOpenChange, open }: TLUiPopoverProps) {
+export function TldrawUiPopover({ id, children, onOpenChange, open, className }: TLUiPopoverProps) {
 	const [isOpen, handleOpenChange] = useMenuIsOpen(id, onOpenChange)
 
 	return (
 		<_Popover.Root onOpenChange={handleOpenChange} open={open || isOpen /* allow debugging */}>
-			<div className="tlui-popover">{children}</div>
+			<div className={classNames('tlui-popover', className)}>{children}</div>
 		</_Popover.Root>
 	)
 }

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

@@ -1,6 +1,8 @@
 import classnames from 'classnames'
 import { Toolbar as _Toolbar } from 'radix-ui'
 import React from 'react'
+import { TldrawUiGrid, TldrawUiRow } from './layout'
+import { TldrawUiTooltip } from './TldrawUiTooltip'
 
 /** @public */
 export interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -8,20 +10,25 @@ export interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
 	className?: string
 	dir?: 'ltr' | 'rtl'
 	label: string
+	orientation?: 'horizontal' | 'grid'
 }
 
 /** @public @react */
 export const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(
-	({ children, className, label, ...props }: TLUiToolbarProps, ref) => {
+	({ children, className, label, orientation = 'horizontal', ...props }: TLUiToolbarProps, ref) => {
+		const Layout = orientation === 'grid' ? TldrawUiGrid : TldrawUiRow
 		return (
-			<_Toolbar.Root
-				ref={ref}
-				{...props}
-				className={classnames('tlui-toolbar-container', className)}
-				aria-label={label}
-			>
-				{children}
-			</_Toolbar.Root>
+			<Layout asChild>
+				<_Toolbar.Root
+					ref={ref}
+					{...props}
+					className={classnames('tlui-toolbar', className)}
+					aria-label={label}
+					orientation={orientation === 'grid' ? 'horizontal' : orientation}
+				>
+					{children}
+				</_Toolbar.Root>
+			</Layout>
 		)
 	}
 )
@@ -34,23 +41,30 @@ export interface TLUiToolbarButtonProps extends React.HTMLAttributes<HTMLButtonE
 	disabled?: boolean
 	isActive?: boolean
 	type: 'icon' | 'tool' | 'menu'
+	tooltip?: string
 }
 
 /** @public @react */
 export const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToolbarButtonProps>(
-	({ asChild, children, type, isActive, ...props }: TLUiToolbarButtonProps, ref) => {
-		return (
+	({ asChild, children, type, isActive, tooltip, ...props }: TLUiToolbarButtonProps, ref) => {
+		const button = (
 			<_Toolbar.Button
 				ref={ref}
 				asChild={asChild}
 				draggable={false}
 				data-isactive={isActive}
 				{...props}
+				// The tooltip takes care of this.
+				title={undefined}
 				className={classnames('tlui-button', `tlui-button__${type}`, props.className)}
 			>
 				{children}
 			</_Toolbar.Button>
 		)
+
+		const tooltipContent = tooltip || props.title
+
+		return <TldrawUiTooltip content={tooltipContent}>{button}</TldrawUiTooltip>
 	}
 )
 
@@ -93,6 +107,7 @@ export interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLBut
 	className?: string
 	type: 'icon' | 'tool'
 	value: string
+	tooltip?: string
 }
 
 /** @public @react */
@@ -101,11 +116,14 @@ export const TldrawUiToolbarToggleItem = ({
 	className,
 	type,
 	value,
+	tooltip,
 	...props
 }: TLUiToolbarToggleItemProps) => {
-	return (
+	const toggleItem = (
 		<_Toolbar.ToggleItem
 			{...props}
+			// The tooltip takes care of this.
+			title={undefined}
 			className={classnames(
 				'tlui-button',
 				`tlui-button__${type}`,
@@ -117,4 +135,8 @@ export const TldrawUiToolbarToggleItem = ({
 			{children}
 		</_Toolbar.ToggleItem>
 	)
+
+	const tooltipContent = tooltip || props.title
+
+	return <TldrawUiTooltip content={tooltipContent}>{toggleItem}</TldrawUiTooltip>
 }

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

@@ -0,0 +1,332 @@
+import { assert, Editor, uniqueId, useMaybeEditor, Vec } from '@tldraw/editor'
+import { Tooltip as _Tooltip } from 'radix-ui'
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react'
+import { usePrefersReducedMotion } from '../../../shapes/shared/usePrefersReducedMotion'
+
+const DEFAULT_TOOLTIP_DELAY_MS = 700
+
+/** @public */
+export interface TldrawUiTooltipProps {
+	children: React.ReactNode
+	content?: string | React.ReactNode
+	side?: 'top' | 'right' | 'bottom' | 'left'
+	sideOffset?: number
+	disabled?: boolean
+}
+
+// Singleton tooltip manager
+class TooltipManager {
+	private static instance: TooltipManager | null = null
+	private currentTooltipId: string | null = null
+	private currentContent: string | React.ReactNode = ''
+	private currentSide: 'top' | 'right' | 'bottom' | 'left' = 'bottom'
+	private currentSideOffset: number = 5
+	private destroyTimeoutId: number | null = null
+	private subscribers: Set<() => void> = new Set()
+	private activeElement: HTMLElement | null = null
+	private editor: Editor | null = null
+
+	static getInstance(): TooltipManager {
+		if (!TooltipManager.instance) {
+			TooltipManager.instance = new TooltipManager()
+		}
+		return TooltipManager.instance
+	}
+
+	setEditor(editor: Editor | null) {
+		this.editor = editor
+	}
+
+	subscribe(callback: () => void): () => void {
+		this.subscribers.add(callback)
+		return () => this.subscribers.delete(callback)
+	}
+
+	private notify() {
+		this.subscribers.forEach((callback) => callback())
+	}
+
+	showTooltip(
+		tooltipId: string,
+		content: string | React.ReactNode,
+		element: HTMLElement,
+		side: 'top' | 'right' | 'bottom' | 'left' = 'bottom',
+		sideOffset: number = 5
+	) {
+		// Clear any existing destroy timeout
+		if (this.destroyTimeoutId) {
+			clearTimeout(this.destroyTimeoutId)
+			this.destroyTimeoutId = null
+		}
+
+		// Update current tooltip
+		this.currentTooltipId = tooltipId
+		this.currentContent = content
+		this.currentSide = side
+		this.currentSideOffset = sideOffset
+		this.activeElement = element
+
+		this.notify()
+	}
+
+	hideTooltip(tooltipId: string, instant: boolean = false) {
+		const hide = () => {
+			// Only hide if this is the current tooltip
+			if (this.currentTooltipId === tooltipId) {
+				this.currentTooltipId = null
+				this.currentContent = ''
+				this.activeElement = null
+				this.destroyTimeoutId = null
+				this.notify()
+			}
+		}
+
+		if (instant) {
+			hide()
+		} else if (this.editor) {
+			// Start destroy timeout (1 second)
+			this.destroyTimeoutId = this.editor.timers.setTimeout(hide, 300)
+		}
+	}
+
+	hideAllTooltips() {
+		this.currentTooltipId = null
+		this.currentContent = ''
+		this.activeElement = null
+		this.destroyTimeoutId = null
+		this.notify()
+	}
+
+	getCurrentTooltipData() {
+		return {
+			id: this.currentTooltipId,
+			content: this.currentContent,
+			side: this.currentSide,
+			sideOffset: this.currentSideOffset,
+			element: this.activeElement,
+		}
+	}
+}
+
+export const tooltipManager = TooltipManager.getInstance()
+
+// Context for the tooltip singleton
+const TooltipSingletonContext = createContext<boolean>(false)
+
+/** @public */
+export interface TldrawUiTooltipProviderProps {
+	children: React.ReactNode
+}
+
+/** @public @react */
+export function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps) {
+	return (
+		<_Tooltip.Provider skipDelayDuration={700}>
+			<TooltipSingletonContext.Provider value={true}>
+				{children}
+				<TooltipSingleton />
+			</TooltipSingletonContext.Provider>
+		</_Tooltip.Provider>
+	)
+}
+
+// The singleton tooltip component that renders once
+function TooltipSingleton() {
+	const editor = useMaybeEditor()
+	const [, forceUpdate] = useState({})
+	const [isOpen, setIsOpen] = useState(false)
+	const triggerRef = useRef<HTMLDivElement>(null)
+	const previousPositionRef = useRef<{ x: number; y: number } | null>(null)
+	const prefersReducedMotion = usePrefersReducedMotion()
+	const [shouldAnimate, setShouldAnimate] = useState(false)
+	const isFirstShowRef = useRef(true)
+	const showTimeoutRef = useRef<number | null>(null)
+
+	// Set editor in tooltip manager
+	useEffect(() => {
+		tooltipManager.setEditor(editor)
+	}, [editor])
+
+	// Subscribe to tooltip manager updates
+	useEffect(() => {
+		const unsubscribe = tooltipManager.subscribe(() => {
+			forceUpdate({})
+		})
+		return unsubscribe
+	}, [])
+
+	const tooltipData = tooltipManager.getCurrentTooltipData()
+
+	// Update open state and trigger position
+	useEffect(() => {
+		const shouldBeOpen = Boolean(tooltipData.id && tooltipData.element)
+
+		// Clear any existing show timeout
+		if (showTimeoutRef.current) {
+			clearTimeout(showTimeoutRef.current)
+			showTimeoutRef.current = null
+		}
+
+		if (shouldBeOpen && tooltipData.element && triggerRef.current) {
+			// Position the invisible trigger element over the active element
+			const activeRect = tooltipData.element.getBoundingClientRect()
+			const trigger = triggerRef.current
+
+			const newPosition = {
+				x: activeRect.left + activeRect.width / 2,
+				y: activeRect.top + activeRect.height / 2,
+			}
+
+			// Determine if we should animate
+			let shouldAnimateCheck = false
+			if (previousPositionRef.current) {
+				const isNearPrevious = Vec.DistMin(previousPositionRef.current, newPosition, 200)
+				// Only animate if the distance is less than 200px (nearby tooltips)
+				shouldAnimateCheck =
+					!prefersReducedMotion &&
+					isNearPrevious &&
+					Math.abs(newPosition.y - previousPositionRef.current.y) < 50
+			}
+			// Don't animate on initial show (previousPositionRef.current is null)
+
+			setShouldAnimate(isFirstShowRef.current ? false : shouldAnimateCheck)
+			previousPositionRef.current = newPosition
+
+			trigger.style.position = 'fixed'
+			trigger.style.left = `${activeRect.left}px`
+			trigger.style.top = `${activeRect.top}px`
+			trigger.style.width = `${activeRect.width}px`
+			trigger.style.height = `${activeRect.height}px`
+			trigger.style.pointerEvents = 'none'
+			trigger.style.zIndex = '9999'
+
+			// Handle delay for first show
+			if (isFirstShowRef.current && editor) {
+				showTimeoutRef.current = editor.timers.setTimeout(() => {
+					setIsOpen(true)
+					isFirstShowRef.current = false
+				}, editor.options.tooltipDelayMs)
+			} else {
+				// Subsequent tooltips show immediately
+				setIsOpen(true)
+			}
+		} else if (!shouldBeOpen) {
+			// Hide tooltip immediately
+			setIsOpen(false)
+			// Reset position tracking when tooltip closes
+			previousPositionRef.current = null
+			setShouldAnimate(false)
+			// Reset first show state after tooltip is hidden
+			isFirstShowRef.current = true
+		}
+	}, [tooltipData.id, tooltipData.element, editor, prefersReducedMotion])
+
+	if (!tooltipData.id) {
+		return null
+	}
+
+	return (
+		<_Tooltip.Root open={isOpen} delayDuration={0}>
+			<_Tooltip.Trigger asChild>
+				<div ref={triggerRef} />
+			</_Tooltip.Trigger>
+			<_Tooltip.Content
+				className="tlui-tooltip"
+				data-should-animate={shouldAnimate}
+				side={tooltipData.side}
+				sideOffset={tooltipData.sideOffset}
+				avoidCollisions
+				collisionPadding={8}
+				dir="ltr"
+			>
+				{tooltipData.content}
+				<_Tooltip.Arrow className="tlui-tooltip__arrow" />
+			</_Tooltip.Content>
+		</_Tooltip.Root>
+	)
+}
+
+/** @public @react */
+export function TldrawUiTooltip({
+	children,
+	content,
+	side = 'bottom',
+	sideOffset = 5,
+	disabled = false,
+}: TldrawUiTooltipProps) {
+	const editor = useMaybeEditor()
+	const tooltipId = useRef<string>(uniqueId())
+	const hasProvider = useContext(TooltipSingletonContext)
+
+	// Don't show tooltip if disabled, no content, or UI labels are disabled
+	if (disabled || !content) {
+		return <>{children}</>
+	}
+
+	// Fallback to old behavior if no provider
+	if (!hasProvider) {
+		return (
+			<_Tooltip.Root
+				delayDuration={editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS}
+				disableHoverableContent
+			>
+				<_Tooltip.Trigger asChild>{children}</_Tooltip.Trigger>
+				<_Tooltip.Content
+					className="tlui-tooltip"
+					side={side}
+					sideOffset={sideOffset}
+					avoidCollisions
+					collisionPadding={8}
+					dir="ltr"
+				>
+					{content}
+					<_Tooltip.Arrow className="tlui-tooltip__arrow" />
+				</_Tooltip.Content>
+			</_Tooltip.Root>
+		)
+	}
+
+	const child = React.Children.only(children)
+	assert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')
+
+	const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
+		child.props.onMouseEnter?.(event)
+		tooltipManager.showTooltip(
+			tooltipId.current,
+			content,
+			event.currentTarget as HTMLElement,
+			side,
+			sideOffset
+		)
+	}
+
+	const handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
+		child.props.onMouseLeave?.(event)
+		tooltipManager.hideTooltip(tooltipId.current)
+	}
+
+	const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
+		child.props.onFocus?.(event)
+		tooltipManager.showTooltip(
+			tooltipId.current,
+			content,
+			event.currentTarget as HTMLElement,
+			side,
+			sideOffset
+		)
+	}
+
+	const handleBlur = (event: React.FocusEvent<HTMLElement>) => {
+		child.props.onBlur?.(event)
+		tooltipManager.hideTooltip(tooltipId.current)
+	}
+
+	const childrenWithHandlers = React.cloneElement(children as React.ReactElement, {
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+	})
+
+	return childrenWithHandlers
+}