Splunk Search

How to show a hidden field in a tooltip when I hover over rows in the table?

New Member

Hi all,

I'm trying to do something like this:
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!

0 Karma


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

  • 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">
    <unset token="search"></unset>
  <label>Address Test</label>
      <table id="rowtooltip">
          <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>
        <option name="count">10</option>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>


], 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

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'});

        // Force the table to re-render


With the result effect being:
alt text

0 Karma