How to Make Widget Action Icons Always Visible in Bold BI Embedded Dashboards

Overview

In Bold BI dashboards, widget action icons (such as options menu, export, filter, etc.) are displayed in the top-right corner of each widget.

By default, these icons are visible only when the user hovers over the widget.

This article explains how to make these action icons permanently visible in embedded dashboards to improve accessibility and user experience.

Current Behavior

• Widget action icons are hidden by default.
• Icons appear only when the user moves the cursor over the widget area.
• This behavior is part of the default UI/UX design.

Requirement

Some applications require:

• Action icons to be visible at all times
• No dependency on mouse hover interactions
• Improved usability in:
  • Touch-enabled devices
  • Accessibility-focused applications
  • Embedded analytics environments

Solution

This behavior can be achieved by applying custom CSS overrides in the embedding application. No SDK or JavaScript changes are required.

Implementation Steps

Step 1: Add CSS to Your Embedding Application

Include the following CSS in your application where the Bold BI dashboard is embedded.

Option 1: Always Show All Widget Action Icons

.widget-control-icon-wrapper,
.bbi-dbrd-designer-hoverable {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

Option 2: Keep Icons Visible Without Hover Dependency

.widget-control-icon-wrapper,
.widget-control-icon-wrapper:not(:hover) {
    visibility: visible !important;
    opacity: 1 !important;
}

Step 2: Apply CSS After Dashboard Load (Optional)

If required, inject the CSS dynamically after the dashboard loads:

dashboard.on("load", function () {
    const style = document.createElement("style");
    style.innerHTML = `
        .widget-control-icon-wrapper,
        .bbi-dbrd-designer-hoverable {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
    `;
    document.head.appendChild(style);
});

Expected Behavior After Applying CSS

• Widget action icons remain visible at all times
• No hover interaction is required to display the icons
• Provides a consistent user experience across all devices