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-custo...
- 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:
