Toolbar Tooltips - Add helpful tooltips to toolbar buttons

Toolbar Button Tooltips

Functional Overview

This example demonstrates adding helpful tooltips to toolbar buttons. Tooltips appear on hover and provide context about button functionality, keyboard shortcuts, or additional information. Implementation uses HTML title attributes or custom tooltip components.

Implementation of Key Features

HTML Title Tooltips

<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>

Custom Tooltip Component

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>
    );
};

Rich Tooltip Content

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

Creative Use Cases

Complex Tools: Explain advanced features with detailed tooltips.

Keyboard Shortcuts: Show shortcuts for power users.

Feature Discovery: Help users discover available functionality.

Context Help: Provide situation-specific assistance.

Accessibility: Enhanced screen reader support with descriptive tooltips.