Hide Table and Column Information in Dashboard Filter Tooltips

When users interact with filters on a dashboard, they often see a tooltip displaying the table name, column name, and description. While this information can be useful for developers and administrators, it may not be relevant—or desirable—to display to end viewers. In many cases, exposing table and column names can create confusion or clutter, detracting from the user experience.

So, how can you hide this technical information and keep your dashboard clean and user-friendly for your audience? Here's a simple solution to hide table and column details in filter tooltips for your viewers.

Steps:

1. Open a dashboard

2. Add below dashboard script to the dashboard

dashboard.on('initialized', (sender, args) => {
	if (prism.user.roleName !== 'consumer') {
		return;
	}

	$('#prism-rightview .global-filters .ew-host .ew-i-header-menu .ew-i-caption').on('mouseover', function(e){
		$(`.tipper-content[data-ng-include="'/views/eucalyptus/itemhint.html'"] .ih-host .ih:gt(2)`).remove();

	})

	function addObserverIfDesiredNodeAvailable() {
		function handleNewElementAdded(mutationsList, observer) {
			mutationsList.forEach((mutation) => {
				if (mutation.type === 'childList') {
					mutation.addedNodes.forEach((addedNode) => {

						if (addedNode.classList && addedNode.classList.contains('tipper-host') &&

							addedNode.classList.contains('hint-dpi') &&

							addedNode.querySelector(`.tipper-content[data-ng-include="'/views/eucalyptus/itemhint.html'"] .ih-host .ih`)) {

							$(addedNode).find('.ih:gt(0)').hide()
							$(addedNode).find('.ih').css('border-bottom', 'none');
							$(addedNode).find('.ih').css('padding', '1px');

						}
					});
				}
			});
		}

		const observer = new MutationObserver(handleNewElementAdded);

		const observerConfig = {
			childList: true,
			subtree: true
		};

		observer.observe(document.body, observerConfig);
	}
	addObserverIfDesiredNodeAvailable();
});

3. Save the script and refresh the dashboard

For an even more user-friendly experience, you can go beyond simply hiding table and column names by adding a custom description to the tooltip. This description can provide valuable context, explaining the purpose of the filter, how it impacts the data, and why it's relevant to the user’s analysis. This additional layer of information can make the dashboard more intuitive and informative for end users.

But why stop there? You can take it a step further by incorporating HTML styling into your tooltip, allowing you to customize the text, colors, fonts, and layout. This makes the tooltip not only more informative but also visually appealing, creating a polished and cohesive user experience.

Here’s a screenshot showing how this works in practice. If you're interested in implementing this enhanced and styled tooltip feature in your dashboards, feel free to reach out—I’d be happy to help!