Skip to main content

Tree overflow-title tooltip placement is configurable (WEB-1539)

Version: 0.10.0 · Type: ✨ Feature

WEB-1539 · Source issue: INTR-205

Problem​

Tree automatically wraps an overflowing title with Tooltip, but the internal tooltip previously always used the component defaults. Consumers placing a Tree against the left edge of the viewport could not prefer right-side placement without replacing Tree's built-in overflow behavior or changing Tooltip globally.

Changed Files​

  • packages/design/src/components/Tree/Tree.tsx
  • packages/design/src/components/Tree/__tests__/Tree.test.tsx
  • packages/design/src/components/Tree/__tests__/Tree.ct.spec.tsx
  • packages/design/src/components/Tree/TreeDesignSpec.md
  • packages/design-site/docs/components/tree.mdx

Changes​

  1. Add an optional tooltip?: TreeTitleTooltipProps field to TreeDataNode, exposing per-node Tooltip behavior and presentation while omitting title, content, children, asChild, open, and defaultOpen.
  2. Add 12 tooltip.placement presets: top, right, bottom, left, plus the -start / -end variant for each side. Each resolves to the corresponding Tooltip side / align pair with a fixed sideOffset of 8.
  3. Apply each node's resolved configuration to its own automatic overflow-title Tooltip.
  4. Keep content, trigger structure, and controlled open state internal; preserve existing Tooltip defaults when the prop is omitted.
  5. Document right-side placement for left-sidebar trees. Radix collision handling remains enabled and may flip the tooltip when the preferred side has insufficient space.
  6. Add unit and Playwright component coverage for placement resolution, and correct the Tooltip docs' sideOffset default from 8 to the implemented value 0.

Usage​

<Tree
treeData={[
{
key: 'recording',
title: 'A very long recording title',
tooltip: { placement: 'right' },
},
]}
/>

Impact​

This is an additive, backward-compatible API change. No business consumer is wired in this change.