Sisense widget script: Add tooltip to widget title

In this tutorial, we'll walk through the process of adding a tooltip to the title of a Sisense widget using script. This enhancement provides users with additional information about the widget's content. 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 indicator widget for which you want to add the tooltip. Add the following code into the widget's script editor.

widget.on('buildquery', function(se, ev) {
	
    // Get the widget title
    var widgetTitle = ev.widget.title;

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

    // Add the tooltip to the widget title
    $(`widget[widgetid="${ev.widget.oid}"] .transput-holder`).attr('title',tooltip);
    
    $(`widget[widgetid="${ev.widget.oid}"] widget-title`).attr('title',tooltip);
});

Note: To add both hyperlink and tooltip to the widget title, use below code.

Refer this post for details on how to hyperlink widget title.

widget.on('buildquery', function(se, ev) {
	
    // Get the widget title
    var widgetTitle = ev.widget.title;

    // Assign URL link to the glossary
    var url = 'https://sisense.dev/reference/js/';

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

    // Insert the hyperlink with tooltip into the widget title
    $(`widget[widgetid="${ev.widget.oid}"] .transput-holder`).empty().append(`<a href="${url}" target="_blank" title="${tooltip}">${widgetTitle}</a>`);
    
    $(`widget[widgetid="${ev.widget.oid}"] widget-title`).empty().append(`<a href="${url}" target="_blank" title="${tooltip}">${widgetTitle}</a>`);

});

Step 2: Understanding the Code Logic

The widget.on('buildquery', function(se, ev) {...}) event handler executes during the query-building process.

Then we retrieve the widget title and assign it to the widgetTitle variable.

A tooltip text is defined to provide additional context about the widget.

Using jQuery, the code adds the defined tooltip into both the widget's title area and the widget's content area using the title attribute.

Step 3: Applying the Changes

After adding the script, click "Save" to apply the changes and refresh the widget. Your widget's title will now display a tooltip on hover.

This addition provides users with valuable insights into the widget's content and an opportunity to access more information easily.

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