Adding Dashboard Descriptions with a Modal Info Icon | Help and How-To

gwolfe · 2026-01-23T21:14:31.119000Z

Every widget in Sisense supports descriptions, but what about dashboards themselves? Sometimes you need to explain a dashboard's purpose or guide users on how to interact with it effectively. We solved this by adding an info icon to the top toolbar that triggers a modal with the dashboard description. Add this script at the dashboard level and update the CONFIG object at the top with your custom text. We also included a feedback email in the configuration, making it easy for users to reach out with questions or suggestions. If you'd prefer, you could split this into a separate feedback button instead of including it in the description modal. Another nice touch: you can swap the ℹ️ emoji for a different icon to match the style of Sisense's built-in widget info icons.Let me know if this is helpful or if it this feature already exists and I have missed it. // Configuration - update these values for your dashboard const CONFIG = { feedbackEmail: 'feedback@feedback.com', description: 'You can put your additional context here.' }; $(document).ready(function() { setTimeout(function() { // Clean up any existing instances $('#dashboard-info-icon, #dashboard-info-modal').remove(); // Create info button const infoButton = $('<button id="dashboard-info-icon" title="Dashboard info">ℹ️</button>').css({ cursor: 'pointer', background: 'none', border: 'none', fontSize: '20px', padding: '5px 10px', color: '#666' }); // Add button to toolbar (after Widget button if found, otherwise append to toolbar) const widgetButton = $('button:contains("Widget")').filter(':visible').first(); if (widgetButton.length) { widgetButton.after(infoButton); } else { $('.dashboard-toolbar').append(infoButton); } // Create modal const modal = $(` <div id="dashboard-info-modal" style="display:none; position:fixed; z-index:10000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);"> <div style="background:white; margin:15% auto; padding:30px; border-radius:8px; width:500px; max-width:90%; box-shadow:0 4px 6px rgba(0,0,0,0.1);"> <h2 style="margin-top:0; color:#333;">Dashboard Description</h2> <p style="line-height:1.6; color:#555;">${CONFIG.description}</p> <p style="line-height:1.6; color:#555; margin-top:20px;"> <strong>Feedback:</strong> <a href="mailto:${CONFIG.feedbackEmail}" style="color:#0078d4; text-decoration:none;">${CONFIG.feedbackEmail}</a> </p> <div style="text-align:right; margin-top:20px;"> <button id="close-modal" style="background:#0078d4; color:white; border:none; padding:10px 24px; border-radius:4px; cursor:pointer; font-size:14px; font-weight:500;">OK</button> </div> </div> </div> `); $('body').append(modal); // Event handlers infoButton.click(function() { modal.fadeIn(200); }); $('#close-modal').click(function() { modal.fadeOut(200); }); // Close when clicking outside modal modal.click(function(e) { if (e.target.id === 'dashboard-info-modal') { modal.fadeOut(200); } }); // Close with ESC key $(document).keydown(function(e) { if (e.key === 'Escape' && modal.is(':visible')) { modal.fadeOut(200); } }); }, 1000); });

MoreDiscussions

Adding Dashboard Descriptions with a Modal Info Icon | Help and How-To | Sisense Community