工具栏工具提示 - 向工具栏按钮添加有用的工具提示

工具栏按钮工具提示

功能概述

本示例演示向工具栏按钮添加有用的工具提示。工具提示在悬停时显示，提供有关按钮功能、键盘快捷键或额外信息的上下文。实现使用 HTML title 属性或自定义工具提示组件。

核心特性实现

HTML 标题工具提示

<RGToolBar>
    <div title="Zoom In (Ctrl++)" className="rg-mb-button">
        <ZoomInIcon size={18} />
    </div>
    <div title="Zoom Out (Ctrl+-)" className="rg-mb-button">
        <ZoomOutIcon size={18} />
    </div>
    <div title="Fit to Screen (Ctrl+0)" className="rg-mb-button">
        <FitIcon size={18} />
    </div>
</RGToolBar>

自定义工具提示组件

const TooltipButton: React.FC<{
    title: string;
    shortcut?: string;
    children: React.ReactNode;
    onClick: () => void;
}> = ({ title, shortcut, children, onClick }) => {
    const [showTooltip, setShowTooltip] = useState(false);

    return (
        <div
            className="rg-mb-button"
            onMouseEnter={() => setShowTooltip(true)}
            onMouseLeave={() => setShowTooltip(false)}
            onClick={onClick}
        >
            {children}
            {showTooltip && (
                <div className="custom-tooltip">
                    <div>{title}</div>
                    {shortcut && <div className="shortcut">{shortcut}</div>}
                </div>
            )}
        </div>
    );
};

丰富工具提示内容

<TooltipButton
    title="Export Graph"
    shortcut="Ctrl+E"
    description="Export current view as PNG or SVG"
    onClick={handleExport}
>
    <DownloadIcon size={18} />
</TooltipButton>

创意使用场景

复杂工具：使用详细工具提示解释高级功能。

键盘快捷键：为高级用户显示快捷键。

功能发现：帮助用户发现可用功能。

上下文帮助：提供特定情况的帮助。

可访问性：使用描述性工具提示增强屏幕阅读器支持。