Info Button

The Info Button component is used to provide additional information or context within a dashboard. It appears as an icon containing a letter, number, or symbol. When hovered over, it displays a tooltip, and when clicked, it opens a pop-up window containing detailed text or instructions.

This component is ideal for embedding help content, data explanations, or contextual notes directly into dashboards without cluttering the main view.

Best Situations to Use

Use the Info Button when you want to:

  • Provide in-context help or instructions for dashboard users.

  • Display metadata or explanations for charts, KPIs, or filters.

  • Offer definitions, disclaimers, or formulas without overwhelming the dashboard.

  • Create a guided user experience by embedding reference material into pop-up windows.

Not Recommended for:

  • Displaying large datasets (use chart components instead).

  • Scenarios requiring continuous visibility of information (use text boxes instead).

Properties

Background

  • Shadow: Enable or disable a shadow effect.

  • Shadow Color: Choose the color of the shadow.

  • Shadow Transparency: Adjust the opacity of the shadow.

General

  • Component Name: Assign a unique identifier.

  • Left / Top: Position the Info Button on the dashboard canvas.

  • Height / Width: Set component dimensions.

  • Initial Visibility: Toggle whether the Info Button is visible on the first preview.

  • Label: Define the character (letter, number, or symbol) to be displayed inside the icon.

  • Tooltip: Provide text displayed when hovering over the Info Button.

  • Display Text: Define the content to be shown inside the pop-up window when the button is clicked.

  • Title: Set the title for the pop-up window.

  • Window Width / Window Height: Adjust dimensions of the pop-up window.

Style

  • Light Color: Customize the background color of the Info Button icon.

  • Title Font Color: Set the font color of the pop-up window title.

  • Title Font Size: Adjust title size.

  • Font Style: Apply styles such as italic or normal.

  • Font Weight: Control thickness (e.g., bold, 400/600/900).

  • Font Family: Choose a typeface consistent with dashboard branding.

  • Window Font Color: Set the text color inside the pop-up window.

  • Window Font Size: Adjust size of the pop-up text.

Example Configurations

  1. Basic Info Button

    • Displays a “?” icon.

    • Tooltip shows “More details available”.

    • Pop-up contains an explanation of a KPI formula.

  2. Styled Info Button

    • Icon background set to light blue.

    • Bold title text inside pop-up window.

    • Customized font family for consistency with dashboard theme.

  3. Interactive Guide Info Button

    • Label “i” with tooltip “Click to learn more”.

    • Pop-up window contains a step-by-step guide with formatted text.

Notes

  • Use short tooltips for hover text and detailed explanations in pop-up windows.

  • Keep pop-up windows at a reasonable size to avoid blocking key dashboard components.

  • Style Info Buttons consistently across dashboards for a professional look.

PreviousImageNextInput Box