Forum Discussion

amritbhgt's avatar
amritbhgt
Cloud Apps
11-30-2023
Solved

Add tooltip for column headers in a Table

Hi All,   I want add tooltips for all the columns present in a table widget .    
Blox
Code-first Analytics
dashboards & reporting
  • rapidbisupport's avatar
    rapidbisupport
    12-04-2023

    You're right, this is for a Pivot Table. Thanks for the clarification.

    You can achieve what you're after for a Table widget using the mousehover event.

    var $dom = prism.$injector.get('ux-controls.services.$dom')
var tip = null

widget.on('ready', (w, args) => {
	$('th').on('mouseover', function (e) {
		var scope = prism.$ngscope.$new()
		console.log($(this).text())
		
		let myTitle = $(this).text()
		
		if ($(this).data().dim === '[Driver.driver]') {
			myTitle = `Driver<br>This is description text` 
		}
		
		tip = $dom.tip({
			template: `<span>${myTitle}</span>`,
			scope: scope,
		}, {
			placement: { place: 'l', anchor: 't' },
			radial: false
		})
	   
		tip.activate({x: e.clientX, y: e.clientY, space: 5})
	})
})

     

    This will behave erratically if you have multiple tables on the same dashboard, and will need rework on the selector above '$('th'). ...'.

    Let me know if this works for you!

    Thanks,

    Daniel

    RAPID BI

    daniel.ranisavljevic@rapidbi.com.au

    RAPID BI - Sisense Professional Services | Implementations | Custom Add-ons

rapidbisupport's avatar
rapidbisupport
Data Pipeline
12-04-2023
Copy Link

Hi amritbhgt ,

The example widget script is derived from this documentation on the Sisense Dev page:

https://sisense.dev/guides/customJs/jsApiRef/widgetClass/pivot2.html#measure-cell-tooltip

var $dom = prism.$injector.get('ux-controls.services.$dom');
var tip = null;

widget.on('cellEnter', function (widget, event) {
   if (event.metadata.rowIndex !== 0) { return }
   if (tip) { tip.deactivate(); }
   var scope = prism.$ngscope.$new();
 
   scope.text = event.cell.value
   
   if (scope.text === 'driver') { scope.text = `${scope.text} <br> is the name of the driver` }
	
   tip = $dom.tip({
       template: `<span>${scope.text}</span>`,
       scope: scope,
   }, {
       placement: { place: 'l', anchor: 't' },
       radial: false
   });
  
   tip.activate({x: event.domEvent.clientX, y: event.domEvent.clientY, space: 5});
});

widget.on('cellLeave', function (widget, event) {
   if (tip) {
       tip.deactivate();
   }
});

Result:

You notice in line 11 we do something like:

if (scope.text === 'driver') { scope.text = `${scope.text} <br> is the name of the driver` }

You can use this pattern to define description text for your titles in the tooltip.

Let me know if this works for you!

Thanks,

Daniel

RAPID BI

daniel.ranisavljevic@rapidbi.com.au

RAPID BI - Sisense Professional Services | Implementations | Custom Add-ons

amritbhgt's avatar
amritbhgt
Cloud Apps
12-04-2023
Copy Link

Hi Rapid Support,

I am looking for tooltip in a table , i think the above code is for a pivot.

Thanks
Amrit
  • rapidbisupport's avatar
    rapidbisupport
    Data Pipeline
    12-04-2023
    Copy Link

    You're right, this is for a Pivot Table. Thanks for the clarification.

    You can achieve what you're after for a Table widget using the mousehover event.

    var $dom = prism.$injector.get('ux-controls.services.$dom')
var tip = null

widget.on('ready', (w, args) => {
	$('th').on('mouseover', function (e) {
		var scope = prism.$ngscope.$new()
		console.log($(this).text())
		
		let myTitle = $(this).text()
		
		if ($(this).data().dim === '[Driver.driver]') {
			myTitle = `Driver<br>This is description text` 
		}
		
		tip = $dom.tip({
			template: `<span>${myTitle}</span>`,
			scope: scope,
		}, {
			placement: { place: 'l', anchor: 't' },
			radial: false
		})
	   
		tip.activate({x: e.clientX, y: e.clientY, space: 5})
	})
})

     

    This will behave erratically if you have multiple tables on the same dashboard, and will need rework on the selector above '$('th'). ...'.

    Let me know if this works for you!

    Thanks,

    Daniel

    RAPID BI

    daniel.ranisavljevic@rapidbi.com.au

    RAPID BI - Sisense Professional Services | Implementations | Custom Add-ons

    • amritbhgt's avatar
      amritbhgt
      Cloud Apps
      01-15-2024
      Copy Link

      Hi Daniel, 

      I have 5 different tables in the dashboard what needs to change in the $(‘th’) . can you please guide me in this .

      Thanks