iter(g109): 提示气泡支持触摸点按

packages/skin/ui/src/tooltip.ts

@@ -12,6 +12,7 @@ export function tooltip(props: TooltipProps, trigger: HTMLElement): HTMLElement
   const id = `ua-tip-${++seq}`;     // 气泡唯一 id
   const delay = props.delay ?? 150; // 出场延迟毫秒；<=0 视为立即显示
   let timer: number | null = null;  // 出场延迟计时器句柄
+  let holdTimer: number | null = null; // 触摸抬手后的延迟收起计时器
 
   const show = () => {
     if (timer != null) window.clearTimeout(timer); // 重复进入先清旧计时
@@ -26,9 +27,22 @@ export function tooltip(props: TooltipProps, trigger: HTMLElement): HTMLElement
       window.clearTimeout(timer);
       timer = null;
     }
+    if (holdTimer != null) { // 触摸遗留的延迟收起一并取消，避免刚点开又被上一轮收掉
+      window.clearTimeout(holdTimer);
+      holdTimer = null;
+    }
     open(false);
   };
 
+  /*** 触摸抬手后延迟收起：手指离开屏幕时气泡正被人挡着，留一会儿再收 ***/
+  const hideLater = (ms = 1200): void => {
+    if (holdTimer != null) window.clearTimeout(holdTimer);
+    holdTimer = window.setTimeout(() => {
+      holdTimer = null;
+      open(false);
+    }, ms);
+  };
+
   // —— 触发器与气泡 ——
   trigger.setAttribute('aria-describedby', id); // 无障碍：读屏把提示文案关联到触发器
   const bubble = h(
@@ -43,10 +57,13 @@ export function tooltip(props: TooltipProps, trigger: HTMLElement): HTMLElement
   );
   const root = h('span', { class: 'ua-tip-wrap' }, trigger, bubble);
 
-  root.addEventListener('pointerenter', show);   // 鼠标进入
-  root.addEventListener('pointerleave', hide);  // 鼠标离开
+  root.addEventListener('pointerenter', (e: PointerEvent) => { if (e.pointerType !== 'touch') show(); });   // 鼠标进入（触摸交给下面的点按）
+  root.addEventListener('pointerleave', (e: PointerEvent) => { if (e.pointerType !== 'touch') hide(); });  // 鼠标离开
   root.addEventListener('focusin', show);       // 键盘聚焦（focusin 会冒泡）
   root.addEventListener('focusout', hide);      // 失焦
+  // —— 触摸屏：没有 hover，改点按。按下即出（不等 150ms），抬手留 1.2s 再收，否则手指正挡着气泡就没了 ——
+  root.addEventListener('pointerdown', (e: PointerEvent) => { if (e.pointerType === 'touch') show(); });
+  root.addEventListener('pointerup', (e: PointerEvent) => { if (e.pointerType === 'touch') hideLater(); });
   effect(() => { if (open()) place(flip(trigger, bubble, props.placement ?? 'top')); }); // 每次出场重算方位：空间不足自动翻转
   root.addEventListener('keydown', (e: KeyboardEvent) => {
     if (e.key === 'Escape') { e.stopPropagation(); hide(); } // Esc 立即收起且不影响外层弹层

packages/skin/ui/ua.manifest.json

@@ -32,7 +32,7 @@
       "avatar(props)：头像，有 src 渲染图片（alt 用名称）、无 src 用首字占位，size 可调 + 四档语义底色",
       "alert(props)：提示条，variant 四档语义色 + 可选 title 与 closable 关闭按钮，role=alert 读屏可播报",
       "toast.info/success/warning/error(message, duration?)：消息提示工厂，右上角堆叠，默认 3s 自动消失（悬停暂停、移出续时），出入场微动画；showToast(props) 为完整入参版本（closable 显示关闭按钮，同屏最多 4 条）",
-      "tooltip(props, trigger)：悬浮提示，包裹触发器，hover / focus 延迟 150ms 出场，移出 / 失焦 / Esc 收起；视口一侧空间不足时自动翻转",
+      "tooltip(props, trigger)：包裹式悬浮提示，hover / 键盘聚焦延迟出场，Esc 收起；触摸屏按下即出、抬手延迟 1.2s 收起，气泡 pointer-events: none 不挡点击",
       "popover(props, trigger)：可交互气泡卡片，包裹触发器，默认点击开合 + 点外部 / Esc 收起，content 可放按钮等交互元素；视口一侧空间不足时自动翻转",
       "skeleton(props)：骨架屏占位，variant = text | rect | circle，text 支持 rows 多行，扫光微动画",
       "pagination(props)：独立分页器，page 信号双向绑定，页码过多折叠省略号，首末页禁用翻页，jumpable 时末尾可输入页码直接跳转，键盘可达；pageSizes 可切每页条数",
@@ -1046,12 +1046,10 @@
         ],
         "example": "tooltip({ content: '保存后立即生效' }, button({ label: '保存', onClick: save }))",
         "steps": [
-          "先创建触发器元素，如 const btn = button({ label: '保存' })",
-          "用 tooltip(props, trigger) 包一层：返回带气泡的包裹元素，原触发器仍是独立节点",
-          "鼠标移入或键盘聚焦约 150ms 后出场，移出 / 失焦立即收起；按 Esc 可立刻关闭",
-          "气泡默认在上方，空间不足或需要避让时传 placement: 'bottom'",
-          "气泡 pointer-events: none 不抢指针；判读依赖 aria-describedby + role='tooltip'，读屏可读",
-          "只做展示：不要在气泡里放可点击元素，需要交互请用 modal 或自绘弹层"
+          "把提示要挂在的元素作为第二个参数传入，返回的包裹节点替换原位置（气泡绝对定位，不占布局）",
+          "鼠标悬停或键盘聚焦后延迟 delay 毫秒出场，移出 / 失焦 / Esc 收起；空间不足时自动翻到另一侧",
+          "触摸屏没有 hover：手指按下即出场，抬手后停留 1.2 秒再收起，免得手指正挡着就消失",
+          "气泡设了 pointer-events: none，不会挡住下面的点击；aria-describedby 已关联，读屏能念出提示文案"
         ]
       },
       {