Tree overflow-title tooltip placement is configurable (WEB-1539)
Version: 0.10.0 · Type: ✨ Feature
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.tsxpackages/design/src/components/Tree/__tests__/Tree.test.tsxpackages/design/src/components/Tree/__tests__/Tree.ct.spec.tsxpackages/design/src/components/Tree/TreeDesignSpec.mdpackages/design-site/docs/components/tree.mdx
Changes
- Add an optional
tooltip?: TreeTitleTooltipPropsfield toTreeDataNode, exposing per-node Tooltip behavior and presentation while omittingtitle,content,children,asChild,open, anddefaultOpen. - Add 12
tooltip.placementpresets:top,right,bottom,left, plus the-start/-endvariant for each side. Each resolves to the corresponding Tooltipside/alignpair with a fixedsideOffsetof8. - Apply each node's resolved configuration to its own automatic overflow-title Tooltip.
- Keep content, trigger structure, and controlled open state internal; preserve existing Tooltip defaults when the prop is omitted.
- 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.
- Add unit and Playwright component coverage for placement resolution, and correct the Tooltip docs'
sideOffsetdefault from8to the implemented value0.
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.