iter(g339): tooltip 补指向箭头

.ua/backlog.json

@@ -3437,6 +3437,15 @@
       "acceptance": "toast 容器带 aria-live=polite，error 级别用 role=alert 抢占播报；audit 与 verify 全绿",
       "status": "done",
       "notes": ""
+    },
+    {
+      "id": "g339",
+      "domain": "visual",
+      "title": "tooltip 指向箭头",
+      "motivation": "tooltip 气泡没有箭头，与触发件的指向关系全靠位置猜，四个方向容易读偏",
+      "acceptance": "四方向各有一个与气泡同色的 45° 菱形箭头，全部用 --ua-* 令牌与百分比定位，audit:visual 棘轮零新增字面量",
+      "status": "open",
+      "notes": ""
     }
   ]
 }

packages/skin/ui/ui.css

@@ -2117,6 +2117,34 @@ button.ua-step-dot:hover {
   top: 50%;
   transform: translate(calc(-1 * var(--ua-translate-3)), -50%);
 }
+/*** 指向箭头：45° 菱形，颜色继承气泡底色，暗色自动跟随 ***/
+.ua-tip::after {
+  content: '';
+  position: absolute;
+  width: var(--ua-space-2);
+  height: var(--ua-space-2);
+  background: inherit;
+}
+.ua-tip-top::after {
+  left: 50%;
+  bottom: 0;
+  transform: translate(-50%, 50%) rotate(45deg);
+}
+.ua-tip-bottom::after {
+  left: 50%;
+  top: 0;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.ua-tip-left::after {
+  right: 0;
+  top: 50%;
+  transform: translate(50%, -50%) rotate(45deg);
+}
+.ua-tip-right::after {
+  left: 0;
+  top: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
 .ua-tip.ua-open {
   opacity: 1;
 }