Tooltip (Default & Custom)

Use the Tooltip property block (in the component property section) to control how tooltips appear for charting components.

The Tooltip property block in the component property section grants detailed control over the hover functionality for any charting component. This dedicated configuration area allows you to precisely define the content, format, and behavior of the tooltip that appears when a user hovers their mouse over a data point (like a bar, line marker, or pie slice). Within this block, you can select which data fields to display (e.g., showing both the sales value and the corresponding profit margin), customize the displayed labels, and apply specific formatting (such as currency symbols or percentage signs) to ensure the transient information is clear, relevant, and immediately digestible to the end-user. Essentially, it transforms a basic hover action into a focused, on-demand data inspection tool.

Tooltip block includes: Show Tool Tip, Background Color, Opacity, Border Color, Box Width, Precision, and Highlighter.

Properties

  • Show Tool Tip — Configures tooltip as Default, Custom, or None.

    • Clicking this opens a modal with three radio buttons (default selection is Default).

    • None: No tooltip is shown for the component.

    • Default: Uses the component’s built-in tooltip.

    • Custom: Lets you fully configure the tooltip content and style.

  • Background Color — Sets the tooltip background color.

  • Opacity — Sets tooltip background opacity.

  • Border Color — Sets tooltip border color.

  • Box Width — Select a width for the tooltip box from the dropdown.

  • Precision — Sets numeric precision displayed in the tooltip.

  • Highlighter — Enable to highlight the field’s background color within the tooltip.

Note: “Font Color” changes are not supported in Internet Explorer.

Custom Tool Tip (when Show Tool Tip = Custom)

When you select Custom, an editable text box opens.

Editor features

  • Property buttons (e.g., font color/size/family) across the top.

  • A select box listing all fields of the dataset.

  • Save and Cancel buttons.

Defaults & content

  • The editor auto-populates with selected dataset fields by default.

  • You can add additional fields from the select box.

Field insertion syntax

  • Display the name, then the field name inside brackets.

  • The field data replaces the brackets at runtime.

    • Example snippet:

      Customer: [customer_name]
Revenue: [revenue]

Styling tips

  • To change a field’s font properties, select the entire bracketed token (e.g., [revenue]) before applying style; otherwise, the value may not render in the tooltip.

  • Adjust font color, font size, font family, and other properties via the property buttons.

Embedding HTML in tooltips

Use the special <htmlTag></htmlTag> wrapper to inject raw HTML into the tooltip.

  • Images / Videos can be displayed inside this tag.

  • Use src= with either:

    • A dataset field: src=[Field Name]

    • A fixed URL: src="https://www.bdbizviz.com/resources/images/BDB_logo.png"

Examples

<htmlTag><img src=[ImageURL] style="max-width:180px"/></htmlTag>

<htmlTag>
  <video src=[VideoLink] controls style="width:240px;height:auto"></video>
</htmlTag>

<htmlTag><img src="https://www.bdbizviz.com/resources/images/BDB_logo.png"/></htmlTag>

Note: Ensure your field actually contains a valid URL for image/video rendering.

Mobile Tooltip configuration

  • Available for: Timeline, Bar, Heatmap, Pie.

  • Works only when the component is in the maximized state.

  • Enable Default Tooltip via script:

// Enable default mobile tooltip style for a component
SSDK.getWidget('ComponentID').m_mobiletooltipstyle = "default";

Replace ComponentID with your chart’s ID.

Workflow (quick start)

  1. Open the component’s Tooltip property block.

  2. Choose Show Tool Tip → Default or Custom (or None).

  3. If Custom:

    • Compose content with bracketed fields (e.g., [sales], [region]).

    • Apply styles via property buttons.

    • (Optional) Wrap advanced content with <htmlTag>…</htmlTag> for images/videos.

  4. Set Background Color, Opacity, Border Color, Box Width, and Precision as needed.

  5. (Optional) Enable Highlighter for emphasized field background.

  6. Preview the chart to validate.

Troubleshooting

  • Tooltip not visible: Confirm Show Tool Tip isn’t set to None.

  • Styled field not rendering: Re-select the entire [field] token before applying font properties.

  • Image/video not appearing: Verify the src URL (or [Field Name] value) is valid and reachable.

  • Unexpected numeric formatting: Adjust Precision; check the component’s number format settings as well.

  • Mobile tooltip not showing: Ensure the component is maximized and the script property m_mobiletooltipstyle is set.

PreviousIndicators in ChartsNextData Label