diff --git a/.ua/backlog.json b/.ua/backlog.json index dacceaf..57c9db8 100644 --- a/.ua/backlog.json +++ b/.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": "" } ] } diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index a869ca6..608ac17 100644 --- a/packages/skin/ui/ui.css +++ b/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; }