Disclaimer: I don’t pretend to know a lot about Javascript and have only come to this answer through needing it myself and hacked my way through it. Though considering there is no answer here and I have a working example, I thought it best to share. It is based on a combination of:
The blog mentioned: https://www.splunk.com/blog/2014/01/29/add-a-tooltip-to-simple-xml-tables-with-bootstrap-and-a-custom-cell-renderer.html
This Splunk answer for the hidden field: https://answers.splunk.com/answers/592103/how-can-i-show-multiple-values-on-a-tooltip-from-a.html
The “Table Row Highlighting” example from the Splunk Dashboard Examples app: https://splunkbase.splunk.com/app/1603/
And various jquery examples found throughout stackovervflow.com
I have found that however the behavior is inconsistent on tables that take a long time to load (like from a long search—it has trouble setting the data-toggle value) but otherwise works as expected (maybe someone else will have that issue and provide their fix).
A rough explanation of what I am doing is
Combining the “hidden” field into one that can be seen (because it doesn’t seem to be able to use it otherwise) and splitting it apart for use for the tooltip
Using the BaseCellRenderer, moving the hidden text from the split into a hidden span section in that cell
Then finding that span and setting the parent (row) to have the data-toggle set to tooltip
Then setting the tooltip text to match the hidden span’s value
Here is a basic example of what you where mentioning, the dashboard xml and the javascript code.
Dashboard (Note I am going the long way about so that it is hopefully clear about the combining fields):
<dashboard stylesheet="rowtooltip.css" script="rowtooltip.js">
<init>
<unset token="search"></unset>
</init>
<label>Address Test</label>
<row>
<panel>
<table id="rowtooltip">
<search>
<query>| makeresults
| eval combined = "Bruce,Wayne,Gotham City|Clark,Kent,Metropolis|Peter,Parker,New York City"
| eval combined = split(combined, "|")
| mvexpand combined
| rex field=combined "(?<First>[^,]+),(?<Last>[^,]+),(?<Address>[^\$]+)"
| table First Last Address
| eval Last = Last."####".Address
| table First Last</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="count">10</option>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
</table>
</panel>
</row>
</dashboard>
Javascript:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
var CustomTooltipRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return cell.field === 'Last';
},
render: function($td, cell) {
//split the cell to extract the text for the tooltip and hide it
var message = cell.value.split('####')[0];
var tip = cell.value.split('####')[1];
$td.html(_.template('<%- message%><span style="display:none" class="tip"><%- tip%></span>', {
message: message,
tip: tip,
}));
// label the class to find it later
$td.addClass('carrier-cell');
}
});
mvc.Components.get('rowtooltip').getVisualization(function(tableView) {
// Register custom cell renderer
tableView.table.addCellRenderer(new CustomTooltipRenderer());
tableView.on('rendered', function() {
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.carrier-cell').each(function() {
// Grab the hidden value from the carrier cell to display in tooltip
var message = $(this).find('span').html();
// Set the tool tip on the cell's parent row
$(this).parents('tr').attr('data-toggle','tooltip').tooltip({title: message, placement: 'top'});
});
tableView.$el.find('[data-toggle="tooltip"]').tooltip();
});
// Force the table to re-render
tableView.table.render();
});
});
With the result effect being:
... View more