fix(tooltip): 气泡改用 :focus-visible 触发,鼠标点过按钮后挪开不再常驻
This commit is contained in:
@@ -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 }) {
|
||||
|
||||
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user