Sisense widget script: Tooltip for column in table widget

In this tutorial, we'll see how to add a tooltip to a specific column header/column members in a Sisense table widget using script. This enhancement provides users with additional context about the data within the column, improving the overall data interpretation experience. Follow the steps below to implement this feature in your Sisense dashboard.

Step 1: Adding the widget script

Begin by opening your Sisense dashboard in the Edit mode. Locate the table widget for which you want to add the tooltip. Add the following code into the widget's script editor.

widget.on('domready', function(w, args) {
	
	// Define the target column header's data-dim attribute value	
	// Instead of Commerce.Gender add your Table.Column name
	var targetDataDim = '[Commerce.Gender]';

	// Find the column header element based on the data-dim attribute
	var targetColumnHeader = $('widget[widgetid="'+w.oid+'"] .dataTable thead th[data-dim="' + targetDataDim + '"]');
	// Find the column members based on the index
	var targetColumnValue = $('widget[widgetid="'+w.oid+'"] .dataTable tbody td:nth-child(7)');

	// Define the tooltip text
	var tooltipText = 'Tooltip text here';

	// Add a title attribute with the tooltip text
	targetColumnHeader.attr('title', tooltipText);
	targetColumnValue.attr('title', tooltipText);
	
	// An event fired on each table re-draw:
    $(element).on('draw.dt', function() {
			
		// Define the target column header's data-dim attribute value	
		var targetDataDim = '[Commerce.Gender]';

		// Find the column header element based on the data-dim attribute
		var targetColumnHeader = $('widget[widgetid="'+w.oid+'"] .dataTable thead th[data-dim="' + targetDataDim + '"]');
		
		// Find the column members based on the index
		var targetColumnValue = $('widget[widgetid="'+w.oid+'"] .dataTable tbody td:nth-child(7)');

		// Define the tooltip text
		var tooltipText = 'Tooltip text here';

		// Add a title attribute with the tooltip text
		targetColumnHeader.attr('title', tooltipText);
		targetColumnValue.attr('title', tooltipText);
        
    })
	
});

Step 2: Understanding the Code Logic

The widget.on('domready', function(w, args) {...}) event handler executes when the widget's DOM (Document Object Model) is ready.

Finds the specific column header based on the specified data-dim attribute value. Finds the column members based on the column index (starting from 1). You can add the tooltip for just the column header or column members as per your requirement.

A tooltip text is defined to provide additional information about the column's data.

The script uses jQuery to add a title attribute to both the column header and the column members, displaying the defined tooltip text.

Additionally, an event listener is added to detect when the table is re-drawn (draw.dt event), ensuring the color coding remains consistent even after interactions with the widget (e.g. moving to the next page in the table).

Step 3: Applying the Changes

After adding the script, click "Save" to apply the changes and refresh the widget. The specified column in your table widget will now display the tooltip when users hover over it.

This customization enriches the user experience by offering quick access to valuable context about the displayed data.

GitHub link : https://github.com/lekhamirjankar/Sisense-scripts