From c2958ebf8c46ab05f4e7330cb59edcc53916b7b5 Mon Sep 17 00:00:00 2001 From: Muse Date: Sat, 14 Nov 2026 17:03:11 +0800 Subject: [PATCH] =?UTF-8?q?fix(tooltip):=20=E6=B0=94=E6=B3=A1=E6=94=B9?= =?UTF-8?q?=E7=94=A8=20:focus-visible=20=E8=A7=A6=E5=8F=91=EF=BC=8C?= =?UTF-8?q?=E9=BC=A0=E6=A0=87=E7=82=B9=E8=BF=87=E6=8C=89=E9=92=AE=E5=90=8E?= =?UTF-8?q?=E6=8C=AA=E5=BC=80=E4=B8=8D=E5=86=8D=E5=B8=B8=E9=A9=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Tooltip.tsx | 4 +++- src/styles.css | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx index f5d5a4f..d8b1612 100644 --- a/src/components/Tooltip.tsx +++ b/src/components/Tooltip.tsx @@ -2,7 +2,9 @@ import type { ReactNode } from 'react' /** * 自绘悬浮提示：跟随当前主题（界面变量），不用浏览器原生 title 气泡。 - * 纯 CSS 悬停/聚焦显示，带一点延迟避免划过时闪烁；气泡本身不拦截鼠标。 + * 纯 CSS 显示：鼠标悬停或键盘聚焦（:focus-visible）时延迟浮现； + * 不能用 :focus-within——鼠标点过按钮后焦点留下，气泡会赖着不走。 + * 气泡本身不拦截鼠标。 * 子元素应自带 aria-label，气泡只作视觉呈现（aria-hidden）。 */ export default function Tooltip({ label, children }: { label: string; children: ReactNode }) { diff --git a/src/styles.css b/src/styles.css index f170400..06e01c7 100644 --- a/src/styles.css +++ b/src/styles.css @@ -350,7 +350,7 @@ kbd { background: var(--code-bg); border: 1px solid var(--border); border-radius /* 自绘悬浮提示（Tooltip 组件）：跟随主题变量，悬停/聚焦延迟浮现 */ .tooltip-wrap { position: relative; display: inline-flex; align-items: stretch; } .tooltip-wrap .tooltip-bubble { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(2px); background: var(--bg-editor); color: var(--text); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); font-size: 12px; font-weight: 400; line-height: 1.4; padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 80; } -.tooltip-wrap:hover .tooltip-bubble, .tooltip-wrap:focus-within .tooltip-bubble { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0.35s; } +.tooltip-wrap:hover .tooltip-bubble, .tooltip-wrap:has(:focus-visible) .tooltip-bubble { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0.35s; } /* 自绘下拉（Dropdown 组件）：按钮对齐 .input，展开层沿用应用菜单语言 */ .dropdown { position: relative; } .dropdown-button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 6px; padding: 5px 9px; font-size: 13px; font-family: inherit; cursor: pointer; text-align: left; }