Hi all,
I'm trying to do something like this:
http://blogs.splunk.com/2014/01/29/add-a-tooltip-to-simple-xml-tables-with-bootstrap-and-a-custom-ce...
but for a hidden field.
For example I have a table with two fields: "First Name" & "Last Name" shown in my dashboard, and I have also a hidden column "Address" from the search. My question is how to show the hidden field "Address" in a tooltip when I hover over the rows of the table.
I appreciate any help!
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:
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
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: