跳到主要内容

Tree 超长标题 Tooltip 支持定位配置（WEB-1539）

版本： 0.10.0 · 类型： ✨ 功能新增

WEB-1539 · 来源问题：INTR-205

问题​

Tree 会为超出可用宽度的标题自动包裹 Tooltip，但内部此前只能使用组件默认定位。Tree 位于视口左侧时，调用方无法让完整标题优先显示在右侧，除非绕过 Tree 的自动溢出能力或修改 Tooltip 全局默认值。

改动文件​

  • 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/i18n/zh-CN/docusaurus-plugin-content-docs/current/components/tree.mdx

改动内容​

  1. 为 TreeDataNode 新增可选的 tooltip?: TreeTitleTooltipProps，按节点开放 Tooltip 行为与展示属性，同时排除 title、content、children、asChild、open、defaultOpen。
  2. tooltip.placement 新增 12 个预设：top / right / bottom / left 以及每个方向的 -start / -end 变体，分别解析为 Tooltip 的 side / align 并固定 sideOffset: 8。
  3. 将每个节点解析后的配置应用到它自己的自动超长标题 Tooltip。
  4. 内容、Trigger 结构和受控开关继续由 Tree 管理；未传配置时沿用 Tooltip 默认值。
  5. 文档补充左侧导航 Tree 优先向右展示的推荐用法；Radix 默认碰撞处理保持启用，首选方向空间不足时允许自动翻转。
  6. 增加 placement 解析的单元测试与真实浏览器组件测试，并将 Tooltip 文档中 sideOffset 的默认值从 8 订正为实际的 0。

用法​

<Tree
  treeData={[
    {
      key: 'recording',
      title: '一条很长的录音标题',
      tooltip: { placement: 'right' },
    },
  ]}
/>

影响​

这是向后兼容的新增 API。本次不接入任何业务使用方。