Add tooltips to a Pivot table
This article will show you how to quickly color a pivot table into two sections: by Row and by Value
1. Build your pivot table.
2. In the widget editor, add the widget script below. Information on how to add a widget script here: Dashboard and Widget JavaScript Extensions
var $dom = prism.$injector.get('ux-controls.services.$dom');
var tip = null;
widget.on('cellEnter', function (widget, event) {
var measure = event.metadata.measure;
if (tip) { tip.deactivate(); }
if (!measure) { return; }
var scope = prism.$ngscope.$new();
scope.title = 'Cell Info:';
scope.text = 'Value - ' + event.cell.content;
scope.text2 = 'Column - ' + measure.title;
//add more text scope here
tip = $dom.tip({
template: '<span> <b> {{title}} </b> <br> {{text}} <br> {{text2}} <br> </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();
}
});
Note:
- You can change the values presented by changing the metadata you are pointing too (examples in 'scope.text' and 'scope.text2'). You can add more data to be included by adding another scope field.
- You can change the template of how your tooltip represents data by changing the html in the 'template' field. You can use HTML to customize the look of the text in the tooltip.
For additional references on available metadata and Pivot 2 functionality please see: https://sisense.dev/guides/customJs/jsApiRef/metadata-item.html
Example:
