tldraw 3.16.0-canary.5170ef6b6e20 → 3.16.0-canary.5462c7eac75a

package/src/lib/ui/components/{primitives/TldrawUiButtonPicker.tsx → StylePanel/StylePanelButtonPicker.tsx}

@@ -4,46 +4,52 @@ import {
 	SharedStyle,
 	StyleProp,
 	TLDefaultColorStyle,
-	TLDefaultColorTheme,
 	useEditor,
 } from '@tldraw/editor'
 import { memo, ReactElement, useMemo, useRef } from 'react'
+import { useDefaultColorTheme } from '../../../shapes/shared/useDefaultColorTheme'
 import { StyleValuesForUi } from '../../../styles'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'
-import { TldrawUiToolbarToggleGroup, TldrawUiToolbarToggleItem } from './TldrawUiToolbar'
-import { TldrawUiGrid, TldrawUiRow } from './layout'
+import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
+import {
+	TldrawUiToolbar,
+	TldrawUiToolbarToggleGroup,
+	TldrawUiToolbarToggleItem,
+} from '../primitives/TldrawUiToolbar'
+import { TldrawUiGrid, TldrawUiRow } from '../primitives/layout'
+import { useStylePanelContext } from './StylePanelContext'
+import { StylePanelSubheading } from './StylePanelSubheading'
 
 /** @public */
-export interface TLUiButtonPickerProps<T extends string> {
+export interface StylePanelButtonPickerProps<T extends string> {
 	title: string
 	uiType: string
 	style: StyleProp<T>
 	value: SharedStyle<T>
 	items: StyleValuesForUi<T>
-	theme: TLDefaultColorTheme
-	onValueChange(style: StyleProp<T>, value: T): void
+	onValueChange?(style: StyleProp<T>, value: T): void
 	onHistoryMark?(id: string): void
 }
 
 /** @public */
-export const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker<T extends string>(
-	props: TLUiButtonPickerProps<T>
+export const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T extends string>(
+	props: StylePanelButtonPickerProps<T>
 ) {
+	const ctx = useStylePanelContext()
+
 	const {
 		uiType,
 		items,
 		title,
 		style,
 		value,
-		// columns = clamp(items.length, 2, 4),
-		onValueChange,
-		onHistoryMark,
-		theme,
+		onValueChange = ctx.onValueChange,
+		onHistoryMark = ctx.onHistoryMark,
 	} = props
+	const theme = useDefaultColorTheme()
 	const editor = useEditor()
 	const msg = useTranslation()
 	const breakpoint = useBreakpoint()
@@ -117,43 +123,57 @@ export const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker<T extends
 		}
 	}, [editor, breakpoint, value, onHistoryMark, onValueChange, style])
 
-	const Wrapper = items.length > 4 ? TldrawUiGrid : TldrawUiRow
+	const Layout = items.length > 4 ? TldrawUiGrid : TldrawUiRow
 
 	return (
-		<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: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }
-									: undefined
-							}
-							onPointerEnter={handleButtonPointerEnter}
-							onPointerDown={handleButtonPointerDown}
-							onPointerUp={handleButtonPointerUp}
-							onClick={handleButtonClick}
-						>
-							<TldrawUiButtonIcon icon={item.icon} />
-						</TldrawUiToolbarToggleItem>
-					)
-				})}
-			</TldrawUiToolbarToggleGroup>
-		</Wrapper>
+		<>
+			{ctx.showUiLabels && <StylePanelSubheading>{title}</StylePanelSubheading>}
+			<TldrawUiToolbar label={title}>
+				<TldrawUiToolbarToggleGroup
+					data-testid={`style.${uiType}`}
+					type="single"
+					value={value.type === 'shared' ? value.value : undefined}
+					asChild
+				>
+					<Layout>
+						{items.map((item) => {
+							const isActive = value.type === 'shared' && value.value === item.value
+							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 + (isActive ? ` (${msg('style-panel.selected')})` : '')}
+									tooltip={
+										<>
+											<div>{label}</div>
+											{isActive ? <div>({msg('style-panel.selected')})</div> : null}
+										</>
+									}
+									value={item.value}
+									data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
+									data-isactive={isActive}
+									title={label}
+									style={
+										style === (DefaultColorStyle as StyleProp<unknown>)
+											? { color: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }
+											: undefined
+									}
+									onPointerEnter={handleButtonPointerEnter}
+									onPointerDown={handleButtonPointerDown}
+									onPointerUp={handleButtonPointerUp}
+									onClick={handleButtonClick}
+								>
+									<TldrawUiButtonIcon icon={item.icon} />
+								</TldrawUiToolbarToggleItem>
+							)
+						})}
+					</Layout>
+				</TldrawUiToolbarToggleGroup>
+			</TldrawUiToolbar>
+		</>
 	)
-}) as <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement
+}) as <T extends string>(props: StylePanelButtonPickerProps<T>) => ReactElement

package/src/lib/ui/components/StylePanel/StylePanelContext.tsx

@@ -0,0 +1,63 @@
+import { ReadonlySharedStyleMap, StyleProp, useEditor, useValue } from '@tldraw/editor'
+import { createContext, useCallback, useContext } from 'react'
+import { useUiEvents } from '../../context/events'
+
+/** @public */
+export interface StylePanelContext {
+	styles: ReadonlySharedStyleMap
+	showUiLabels: boolean
+	onHistoryMark(id: string): void
+	onValueChange<T>(style: StyleProp<T>, value: T): void
+}
+const StylePanelContext = createContext<null | StylePanelContext>(null)
+
+/** @public */
+export interface StylePanelContextProviderProps {
+	children: React.ReactNode
+	styles: ReadonlySharedStyleMap
+}
+
+/** @public @react */
+export function StylePanelContextProvider({ children, styles }: StylePanelContextProviderProps) {
+	const editor = useEditor()
+	const trackEvent = useUiEvents()
+
+	const onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])
+	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
+	const onValueChange = useCallback(
+		function <T>(style: StyleProp<T>, value: T) {
+			editor.run(() => {
+				if (editor.isIn('select')) {
+					editor.setStyleForSelectedShapes(style, value)
+				}
+				editor.setStyleForNextShapes(style, value)
+				editor.updateInstanceState({ isChangingStyle: true })
+			})
+
+			trackEvent('set-style', { source: 'style-panel', id: style.id, value: value as string })
+		},
+		[editor, trackEvent]
+	)
+
+	return (
+		<StylePanelContext.Provider
+			value={{
+				styles: styles,
+				showUiLabels,
+				onHistoryMark,
+				onValueChange,
+			}}
+		>
+			{children}
+		</StylePanelContext.Provider>
+	)
+}
+
+/** @public */
+export function useStylePanelContext() {
+	const context = useContext(StylePanelContext)
+	if (!context) {
+		throw new Error('useStylePanelContext must be used within a StylePanelContextProvider')
+	}
+	return context
+}

package/src/lib/ui/components/StylePanel/{DoubleDropdownPicker.tsx → StylePanelDoubleDropdownPicker.tsx}

@@ -11,8 +11,10 @@ import {
 } from '../primitives/TldrawUiPopover'
 import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
+import { useStylePanelContext } from './StylePanelContext'
 
-interface DoubleDropdownPickerProps<T extends string> {
+/** @public */
+export interface StylePanelDoubleDropdownPickerProps<T extends string> {
 	uiTypeA: string
 	uiTypeB: string
 	label: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>
@@ -24,23 +26,27 @@ interface DoubleDropdownPickerProps<T extends string> {
 	styleB: StyleProp<T>
 	valueA: SharedStyle<T>
 	valueB: SharedStyle<T>
-	onValueChange(style: StyleProp<T>, value: T): void
+	onValueChange?(style: StyleProp<T>, value: T): void
 }
 
-function DoubleDropdownPickerInner<T extends string>({
-	label,
-	uiTypeA,
-	uiTypeB,
-	labelA,
-	labelB,
-	itemsA,
-	itemsB,
-	styleA,
-	styleB,
-	valueA,
-	valueB,
-	onValueChange,
-}: DoubleDropdownPickerProps<T>) {
+function DoubleDropdownPickerInner<T extends string>(
+	props: StylePanelDoubleDropdownPickerProps<T>
+) {
+	const ctx = useStylePanelContext()
+	const {
+		label,
+		uiTypeA,
+		uiTypeB,
+		labelA,
+		labelB,
+		itemsA,
+		itemsB,
+		styleA,
+		styleB,
+		valueA,
+		valueB,
+		onValueChange = ctx.onValueChange,
+	} = props
 	const editor = useEditor()
 	const msg = useTranslation()
 	const [isOpenA, setIsOpenA] = React.useState(false)
@@ -155,6 +161,9 @@ function DoubleDropdownPickerInner<T extends string>({
 }
 
 // need to memo like this to get generics
-export const DoubleDropdownPicker = React.memo(
-	DoubleDropdownPickerInner
-) as typeof DoubleDropdownPickerInner
+/** @public @react */
+export const StylePanelDoubleDropdownPicker = React.memo(DoubleDropdownPickerInner) as <
+	T extends string,
+>(
+	props: StylePanelDoubleDropdownPickerProps<T>
+) => React.JSX.Element

package/src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx

@@ -0,0 +1,119 @@
+import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'
+import * as React from 'react'
+import { StyleValuesForUi } from '../../../styles'
+import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
+import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { TLUiIconType } from '../../icon-types'
+import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
+import { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'
+import {
+	TldrawUiPopover,
+	TldrawUiPopoverContent,
+	TldrawUiPopoverTrigger,
+} from '../primitives/TldrawUiPopover'
+import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
+import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
+import { useStylePanelContext } from './StylePanelContext'
+
+/** @public */
+export interface StylePanelDropdownPickerProps<T extends string> {
+	id: string
+	label?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>
+	uiType: string
+	stylePanelType: string
+	style: StyleProp<T>
+	value: SharedStyle<T>
+	items: StyleValuesForUi<T>
+	type: 'icon' | 'tool' | 'menu'
+	onValueChange?(style: StyleProp<T>, value: T): void
+}
+
+function DropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {
+	const ctx = useStylePanelContext()
+	const {
+		id,
+		label,
+		uiType,
+		stylePanelType,
+		style,
+		items,
+		type,
+		value,
+		onValueChange = ctx.onValueChange,
+	} = props
+	const msg = useTranslation()
+	const editor = useEditor()
+	const [isOpen, setIsOpen] = React.useState(false)
+
+	const icon = React.useMemo(
+		() => items.find((item) => value.type === 'shared' && item.value === value.value)?.icon,
+		[items, value]
+	)
+
+	const stylePanelName = msg(`style-panel.${stylePanelType}` as TLUiTranslationKey)
+
+	const titleStr =
+		value.type === 'mixed'
+			? msg('style-panel.mixed')
+			: stylePanelName + ' — ' + msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)
+	const labelStr = label ? msg(label) : ''
+
+	const popoverId = `style panel ${id}`
+	return (
+		<TldrawUiToolbar label={stylePanelName}>
+			<TldrawUiPopover
+				id={popoverId}
+				open={isOpen}
+				onOpenChange={setIsOpen}
+				className="tlui-style-panel__dropdown-picker"
+			>
+				<TldrawUiPopoverTrigger>
+					<TldrawUiToolbarButton
+						type={type}
+						data-testid={`style.${uiType}`}
+						data-direction="left"
+						title={titleStr}
+					>
+						{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}
+						<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />
+					</TldrawUiToolbarButton>
+				</TldrawUiPopoverTrigger>
+				<TldrawUiPopoverContent side="left" align="center">
+					<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>
+						<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
+							{items.map((item) => {
+								return (
+									<TldrawUiToolbarButton
+										key={item.value}
+										type="icon"
+										data-testid={`style.${uiType}.${item.value}`}
+										title={
+											stylePanelName +
+											' — ' +
+											msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
+										}
+										isActive={icon === item.icon}
+										onClick={() => {
+											ctx.onHistoryMark('select style dropdown item')
+											onValueChange(style, item.value)
+											tlmenus.deleteOpenMenu(popoverId, editor.contextId)
+											setIsOpen(false)
+										}}
+									>
+										<TldrawUiButtonIcon icon={item.icon} />
+									</TldrawUiToolbarButton>
+								)
+							})}
+						</TldrawUiMenuContextProvider>
+					</TldrawUiToolbar>
+				</TldrawUiPopoverContent>
+			</TldrawUiPopover>
+		</TldrawUiToolbar>
+	)
+}
+
+// need to export like this to get generics
+/** @public @react */
+export const StylePanelDropdownPicker = React.memo(DropdownPickerInner) as <T extends string>(
+	props: StylePanelDropdownPickerProps<T>
+) => React.JSX.Element

package/src/lib/ui/components/StylePanel/StylePanelSubheading.tsx

@@ -0,0 +1,9 @@
+/** @public */
+export interface StylePanelSubheadingProps {
+	children: React.ReactNode
+}
+
+/** @public @react */
+export function StylePanelSubheading({ children }: StylePanelSubheadingProps) {
+	return <h3 className="tlui-style-panel__subheading">{children}</h3>
+}

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

@@ -70,6 +70,7 @@ export function AltTextEditor({ shapeId, onClose, source }: AltTextEditorProps)
 				data-testid="media-toolbar.alt-text-input"
 				value={altText}
 				placeholder={msg('tool.media-alt-text-desc')}
+				aria-label={msg('tool.media-alt-text-desc')}
 				onValueChange={handleValueChange}
 				onComplete={handleComplete}
 				onCancel={handleAltTextCancel}

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

@@ -75,6 +75,7 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				onComplete={handleLinkComplete}
 				onCancel={handleLinkCancel}
 				placeholder="example.com"
+				aria-label="example.com"
 			/>
 			<TldrawUiToolbarButton
 				className="tlui-rich-text__toolbar-link-visit"

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

@@ -3,8 +3,8 @@ import {
 	Box,
 	clamp,
 	Editor,
+	markEventAsHandled,
 	react,
-	stopEventPropagation,
 	useAtom,
 	useEditor,
 	usePassThroughMouseOverEvents,
@@ -170,7 +170,7 @@ export const TldrawUiContextualToolbar = ({
 			data-visible={false}
 			data-testid="contextual-toolbar"
 			className={classNames('tlui-contextual-toolbar', className)}
-			onPointerDown={stopEventPropagation}
+			onPointerDown={markEventAsHandled}
 		>
 			<TldrawUiToolbar
 				orientation="horizontal"

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

@@ -1,4 +1,4 @@
-import { stopEventPropagation, tlenv, tltime, useMaybeEditor } from '@tldraw/editor'
+import { tlenv, tltime, useMaybeEditor } from '@tldraw/editor'
 import classNames from 'classnames'
 import * as React from 'react'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
@@ -118,7 +118,7 @@ export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
 						// `onChange` with a duplicated text value.
 						if (isComposing.current) return
 						e.currentTarget.blur()
-						stopEventPropagation(e)
+						e.stopPropagation()
 						onComplete?.(e.currentTarget.value)
 						break
 					}
@@ -126,7 +126,7 @@ export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
 						e.currentTarget.value = rInitialValue.current
 						onCancel?.(e.currentTarget.value)
 						e.currentTarget.blur()
-						stopEventPropagation(e)
+						e.stopPropagation()
 						break
 					}
 				}

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

@@ -13,7 +13,7 @@ export interface TLUiSliderProps {
 	label: string
 	title: string
 	onValueChange(value: number): void
-	onHistoryMark(id: string): void
+	onHistoryMark?(id: string): void
 	'data-testid'?: string
 	ariaValueModifier?: number
 }
@@ -53,7 +53,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 
 	const handlePointerDown = useCallback(() => {
 		tooltipManager.hideAllTooltips()
-		onHistoryMark('click slider')
+		onHistoryMark?.('click slider')
 	}, [onHistoryMark])
 
 	// N.B. This is a bit silly. The Radix slider auto-focuses which

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

@@ -71,6 +71,7 @@ export const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToo
 				draggable={false}
 				data-isactive={isActive}
 				{...props}
+				aria-label={props.title}
 				// The tooltip takes care of this.
 				title={undefined}
 				className={classnames('tlui-button', `tlui-button__${type}`, props.className)}
@@ -94,6 +95,7 @@ export interface TLUiToolbarToggleGroupProps extends React.HTMLAttributes<HTMLDi
 	// TODO: fix up this type later
 	defaultValue?: any
 	type: 'single' | 'multiple'
+	asChild?: boolean
 }
 
 /** @public @react */
@@ -101,10 +103,12 @@ export const TldrawUiToolbarToggleGroup = ({
 	children,
 	className,
 	type,
+	asChild,
 	...props
 }: TLUiToolbarToggleGroupProps) => {
 	return (
 		<_Toolbar.ToggleGroup
+			asChild={asChild}
 			type={type}
 			{...props}
 			// TODO: this fixes a bug in Radix until they fix it.
@@ -124,7 +128,7 @@ export interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLBut
 	className?: string
 	type: 'icon' | 'tool'
 	value: string
-	tooltip?: string
+	tooltip?: React.ReactNode
 }
 
 /** @public @react */

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

@@ -6,6 +6,7 @@ import React, {
 	ReactNode,
 	useContext,
 	useEffect,
+	useLayoutEffect,
 	useRef,
 	useState,
 } from 'react'
@@ -24,18 +25,20 @@ export interface TldrawUiTooltipProps {
 	delayDuration?: number
 }
 
+interface CurrentTooltip {
+	id: string
+	content: ReactNode
+	side: 'top' | 'right' | 'bottom' | 'left'
+	sideOffset: number
+	showOnMobile: boolean
+	targetElement: HTMLElement
+	delayDuration: number
+}
+
 // Singleton tooltip manager
 class TooltipManager {
 	private static instance: TooltipManager | null = null
-	private currentTooltip = atom<{
-		id: string
-		content: ReactNode
-		side: 'top' | 'right' | 'bottom' | 'left'
-		sideOffset: number
-		showOnMobile: boolean
-		targetElement: HTMLElement
-		delayDuration: number
-	} | null>('current tooltip', null)
+	private currentTooltip = atom<CurrentTooltip | null>('current tooltip', null)
 	private destroyTimeoutId: number | null = null
 
 	static getInstance(): TooltipManager {
@@ -72,6 +75,15 @@ class TooltipManager {
 		})
 	}
 
+	updateCurrentTooltip(tooltipId: string, update: (tooltip: CurrentTooltip) => CurrentTooltip) {
+		this.currentTooltip.update((tooltip) => {
+			if (tooltip?.id === tooltipId) {
+				return update(tooltip)
+			}
+			return tooltip
+		})
+	}
+
 	hideTooltip(editor: Editor | null, tooltipId: string, instant: boolean = false) {
 		const hide = () => {
 			// Only hide if this is the current tooltip
@@ -142,6 +154,7 @@ function TooltipSingleton() {
 	const [isOpen, setIsOpen] = useState(false)
 	const triggerRef = useRef<HTMLDivElement>(null)
 	const isFirstShowRef = useRef(true)
+	const editor = useMaybeEditor()
 
 	const currentTooltip = useValue(
 		'current tooltip',
@@ -149,6 +162,28 @@ function TooltipSingleton() {
 		[]
 	)
 
+	const cameraState = useValue('camera state', () => editor?.getCameraState(), [editor])
+
+	// Hide tooltip when camera is moving (panning/zooming)
+	useEffect(() => {
+		if (cameraState === 'moving' && isOpen && currentTooltip) {
+			tooltipManager.hideTooltip(editor, currentTooltip.id, true)
+		}
+	}, [cameraState, isOpen, currentTooltip, editor])
+
+	useEffect(() => {
+		function handleKeyDown(event: KeyboardEvent) {
+			if (event.key === 'Escape' && currentTooltip) {
+				tooltipManager.hideTooltip(editor, currentTooltip.id)
+			}
+		}
+
+		document.addEventListener('keydown', handleKeyDown)
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown)
+		}
+	}, [editor, currentTooltip])
+
 	// Update open state and trigger position
 	useEffect(() => {
 		let timer: ReturnType<typeof setTimeout> | null = null
@@ -231,12 +266,11 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		const editor = useMaybeEditor()
 		const tooltipId = useRef<string>(uniqueId())
 		const hasProvider = useContext(TooltipSingletonContext)
+		const showUiLabels = useValue('showUiLabels', () => editor?.user.getShowUiLabels(), [editor])
 
 		const orientationCtx = useTldrawUiOrientation()
 		const sideToUse = side ?? orientationCtx.tooltipSide
 
-		const camera = useValue('camera', () => editor?.getCamera(), [])
-
 		useEffect(() => {
 			const currentTooltipId = tooltipId.current
 			return () => {
@@ -246,17 +280,30 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 			}
 		}, [editor, hasProvider])
 
-		useEffect(() => {
-			tooltipManager.hideTooltip(editor, tooltipId.current, true)
-		}, [editor, camera])
+		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 UI labels are disabled
 		if (disabled || !content) {
 			return <>{children}</>
 		}
 
-		const delayDurationToUse =
-			delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
+		let delayDurationToUse
+		if (showUiLabels) {
+			delayDurationToUse = 0
+		} else {
+			delayDurationToUse =
+				delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
+		}
 
 		// Fallback to old behavior if no provider
 		if (!hasProvider) {