Display widget in tooltip

By default values and labels are displayed in tooltip. Also its possible to add additional information to tooltip by using script . Sometimes it would be more helpful to display a widget as tooltip.

Steps:

1. Create base chart - the chart in which we need to add tooltip.

2. Create a dashboard and add a widget that needs to be displayed as tooltip. Size of widget in this dashboard should be small enough to fit in to the tooltip.

3. Add below script to base chart and update the variable 'dashboaardurl' with URL of dashboard we created for tooltip.

var category

widget.on('beforedatapointtooltip', function(se, ev){
	
	dashboardurl = 'https://XXXX.sisense.com/app/main#/dashboards/6612346ac77683002ea37645'
	
	redrawYN = category != ev.context.category
	category = ev.context.category

	filterPanel = ev.widget.metadata.panels[0].items[0].jaql
	filterPanel.filter = {
		explicit: true,
		members: [category],
		multiSelection: true
	}

	filterjaql = {jaql: filterPanel}

	var filtersArray = [filterjaql];
	var filterString = JSON.stringify(filtersArray);
	var uriEncoded = encodeURIComponent(filterString);

	ev.template = `<iframe width="100%" frameborder="0" 
		src="${dashboardurl}?embed=true&r=false&filter=${uriEncoded}"></iframe>`
	
	if(redrawYN)	
		se.redraw()
	
})

Note:

• Supported widget - Line chart, Column chart, Bar chart, Pie chart

• Currently this script doesn't support widget with 'breakby' panel. (It will be added in future)

• Tooltip may take few seconds to load as it is actually a dashboard.

If you're looking for a more visually appealing and efficient way to display additional information in tooltips, consider rendering a chart instead of a traditional widget. This approach not only enhances the aesthetic appeal but also significantly improves the rendering speed of the tooltip. If you're interested in implementing this solution or would like more details, feel free to reach out.

Below is a GIF showcasing the improved tooltip with a chart. This visual representation highlights the efficiency and aesthetic benefits of this approach.