iter: b01 新增 tooltip 悬浮提示组件
- packages/skin/ui/src/tooltip.ts:包裹式 API tooltip(props, trigger),hover/focus 150ms 延迟出场,移出/失焦/Esc 收起 - types.ts 增 TooltipProps;index.ts 导出;ui.css 增气泡样式(纯 --ua-* 令牌 + 出入场过渡 + reduced-motion 兜底) - ua.manifest.json / llms-full.txt / .ua/index.json / llms.txt 同步;demo 增 sec-tooltip 区块 - backlog b01 置 done,iterations.log 留痕
This commit is contained in:
@@ -613,6 +613,39 @@
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 18%, transparent);
|
||||
}
|
||||
|
||||
/* —— 悬浮提示 —— */
|
||||
.ua-tip-wrap {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
.ua-tip {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
z-index: 30;
|
||||
max-width: 220px;
|
||||
padding: var(--ua-space-1) var(--ua-space-2);
|
||||
border-radius: var(--ua-radius-sm);
|
||||
background: var(--ua-color-text);
|
||||
color: var(--ua-color-bg);
|
||||
font-size: var(--ua-font-size-sm);
|
||||
line-height: 1.5;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.16s ease-out, transform 0.16s ease-out;
|
||||
}
|
||||
.ua-tip-top {
|
||||
bottom: calc(100% + 6px);
|
||||
transform: translateX(-50%) translateY(3px);
|
||||
}
|
||||
.ua-tip-bottom {
|
||||
top: calc(100% + 6px);
|
||||
transform: translateX(-50%) translateY(-3px);
|
||||
}
|
||||
.ua-tip.ua-open {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
/* —— 无障碍:用户偏好减少动效时关闭全部动画 —— */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ua-btn,
|
||||
@@ -630,6 +663,7 @@
|
||||
.ua-progress-fill,
|
||||
.ua-progress-fill::after,
|
||||
.ua-alert,
|
||||
.ua-tip,
|
||||
.ua-form-error,
|
||||
.ua-modal,
|
||||
.ua-modal-overlay {
|
||||
|
||||
Reference in New Issue
Block a user