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:
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!

0 Karma

Contributor

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">
  <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:
alt text

0 Karma